Guía del usuario Cancelar

Códigos incrustados

  1. Guía del usuario de Adobe Fonts
  2. Introducción
    1. Requisitos del sistema y de suscripción
    2. Compatibilidad con navegadores y sistemas operativos
    3. Añadir fuentes en el ordenador
    4. Añadir fuentes al sitio web
    5. Añadir fuentes en CC Mobile
  3. Licencias de fuentes
    1. Licencias de fuentes
    2. Administrar la cuenta
    3. Licencias para clientes de Creative Cloud para empresas
    4. Añadir licencias de fuentes a la cuenta
    5. Eliminación de fuentes de la biblioteca de suscripción
    6. Adobe Fonts no está disponible para Adobe ID registrados en China
    7. ¿Por qué no se incluyen estas fuentes con mi suscripción a Creative Cloud?
    8. Retirada de fuentes de Morisawa en septiembre de 2021
  4. Obtener y usar fuentes
    1. Uso de Adobe Fonts en las aplicaciones de Creative Cloud
    2. Administrar las fuentes
    3. Resolver problemas por fuentes no disponibles en las aplicaciones de escritorio
    4. Uso de fuentes en InDesign
    5. Fuentes y tipografía
    6. Uso de fuentes web en documentos HTML5 Canvas
    7. Uso de fuentes en InCopy
    8. Cómo usar fuentes en Adobe Muse
    9. Uso de fuentes web en Muse
    10. Empaquetar archivos de fuentes
    11. Guía de solución de problemas: añadir fuentes
    12. Las fuentes añadidas no aparecen en el menú de fuentes
    13. “No es posible añadir una o más fuentes” o “Fuente con mismo nombre ya instalada”
    14. ¿Qué sucede cuando la fuente que estoy utilizando la modifica el creador o empresa tipográfica?
  5. Diseño y desarrollo web
    1. Añadir fuentes al sitio web
    2. Guía de solución de problemas: Añadir fuentes a un sitio web
    3. Uso de fuentes web en correos electrónicos HTML o newsletters
    4. Uso de fuentes web con Accelerated Mobile Pages (AMP)
    5. Selectores CSS
    6. Personalizar el funcionamiento de las fuentes web con los ajustes de font-display
    7. Códigos incrustados
    8. Subconjuntos dinámicos y alojamiento de fuentes web
    9. Eventos de fuentes
    10. ¿Por qué mis fuentes web proceden de use.typekit.net?
    11. El sitio no puede conectarse a use.typekit.net
    12. Uso de fuentes web con CodePen
    13. Compatibilidad con navegadores y sistemas operativos
    14. Dominios
    15. Uso de fuentes web al desarrollar de forma local
    16. Política de seguridad de contenido
    17. Impresión de fuentes web
  6. Compatibilidad con idiomas y funciones OpenType
    1. Compatibilidad con idiomas y subconjuntos
    2. Uso de funciones OpenType
    3. Sintaxis de funciones OpenType en CSS
  7. Tecnología de fuentes
    1. Fuentes de color de OpenType-SVG
    2. Ten Mincho: aspectos importantes sobre la actualización de la versión 1.000

El código incrustado es la forma en que se cargan las fuentes web en su sitio web a través del navegador o en un correo electrónico HTML en el cliente de correo electrónico.

El código incrustado predeterminado y el @import solo usan CSS para la carga de fuentes (pero no JavaScript). Estos pueden servir para añadir fuentes a páginas webcorreos electrónicos HTML o newsletters, Google AMP y muchos otros tipos de proyectos en los que se admitan fuentes web. La carga de fuentes mediante JavaScript se utiliza para subconjuntos dinámicos, lo que es necesario para el alojamiento de fuentes web de Asia Oriental.

El código incrustado de cada uno de sus proyectos lo tiene disponible en la página Proyectos web.

Código incrustado predeterminado

El código incrustado predeterminado es una única etiqueta <link> que carga el proyecto web CSS de la red de fuentes (use.typekit.net) en el navegador.

<link rel="stylesheet" href="https://use.typekit.net/xxxxxxx.css">

Para encontrar el código incrustado predeterminado de su proyecto, vaya a la página Proyectos web. Añada este código incrustado a la etiqueta <head> en su sitio web.

Código incrustado @import

El código incrustado @import se puede usar directamente en la hoja de estilo CSS. Para encontrar el código incrustado @import de un proyecto, acceda a la página Proyectos web y luego haga clic en la opción “enlace @import

Colóquelo entre las etiquetas style en el elemento <head> de su sitio web:

<style>
  @import url("https://use.typekit.net/xxxxxxx.css");
</style>

O bien, en la parte superior de su archivo CSS:

Añadir un @import al CSS

Nota:

Si usa el código incrustado @import, tendrá que hacerlo al comienzo de la etiqueta <style> o del archivo CSS con otras declaraciones de @import o de lo contrario las fuentes no se cargarán. Solo se permite incluir una entrada @charset antes de las líneas de @import.

Al usar cualquiera de los tipos de código incrustados CSS, es posible que el resto de la página no se vea hasta que el CSS de la fuente web haya terminado de cargarse. El resultado es diferente según el navegador, en función de cómo se encarga cada uno de procesar los archivos CSS externos.

Para realizar una carga de fuentes asíncrona que no bloquee el resto de la página, incluya otra biblioteca de JavaScript junto con el código CSS incrustado para configurar la carga de fuentes como desee.

Código JavaScript incrustado

El código JavaScript incrustado es necesario para los subconjuntos dinámicos, que sirven para el alojamiento de fuentes web de Asia Oriental.

<script>
  (function(d) {
    var config = {
      kitId: 'xxxxxxx',
      scriptTimeout: 3000,
      async: true
    },
    h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
  })(document);
</script>

El código JavaScript incrustado de un proyecto dinámico se encuentra en la página Proyectos web.

El código incrustado avanzado se puede personalizar pasando un objeto de configuración al método Typekit.load; consulte la sección sobre la API de JavaScript para obtener más detalles.

API de JavaScript

El JavaScript expone la variable global Typekit con una carga de métodos públicos. Si se llama a “Typekit.load“ sin ningún argumento, se activará la carga de fuentes.

Typekit.load()

También puede pasar un objeto de configuración a Typekit.load.

Typekit.load({
      // configuration…
 });

Se pueden indicar las siguientes llamadas de vuelta:

  • loading: esta llamada de vuelta se activa cuando se han solicitado todas las fuentes.
  • active: esta llamada de vuelta se activa cuando las fuentes se han renderizado.
  • inactive: esta llamada de vuelta se activa cuando el navegador no admite fuente vinculadas *o* si no se puede cargar ninguna de las fuentes.
  • fontloading: esta llamada de vuelta se activa una vez por cada fuente que se carga. La llamada de vuelta se invoca con el nombre de la familia como primer argumento y la descripción de la variación de fuente como segundo argumento.
  • fontactive: esta llamada de vuelta se activa una vez por cada fuente que se renderiza. La llamada de vuelta se invoca con el nombre de la familia como primer argumento y la descripción de la variación de fuente como segundo argumento.
  • fontinactive: esta llamada de vuelta se activa si no se puede cargar la fuente. La llamada de vuelta se invoca con el nombre de la familia como primer argumento y la descripción de la variación de fuente como segundo argumento.

Cambiar el código incrustado en un sitio web

Si tiene un sitio web que ya usa fuentes mediante un código JavaScript incrustado previo, puede cambiar a la versión CSS más reciente reemplazando las etiquetas <script> en su código por el código HTML incrustado <link> o el código CSS incrustado @import.

Uso de un código incrustado previo en un sitio web

Aunque Adobe cambia cada cierto tiempo las variantes de códigos incrustados a medida que se van incorporando mejoras en el sistema de alojamiento de fuentes, todas las versiones anteriores de códigos incrustados seguirán funcionando.  

Si va a usar un código incrustado antiguo en su sitio web, no será necesario cambiarlo. Sin embargo, muchos sitios web tendrán un mejor rendimiento si se cambia a una versión más reciente.

Las versiones anteriores del código incrustado incluyen una versión de JavaScript que carga el archivo CSS de forma asíncrona:

<script src="https://use.typekit.net/xxxxxxx.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>

Así como una versión de JavaScript basada en protocolos:

<script src="//use.typekit.net/xxxxxxx.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>

Aunque su sitio utilice el código incrustado basado en protocolos, el alojamiento de fuentes hace uso de HTTPS en todas las solicitudes.

Uso de varios códigos incrustados en un sitio web

No le recomendamos que añada más de un código incrustado a una misma página web por varias razones:

  • Cada copia del código incrustado es casi siempre redundante.
  • Cada proyecto realiza solicitudes separadas de fuentes, lo que aumenta el número de peticiones HTTP y ralentiza aún más el proceso de carga.
  • Un solo proyecto se puede almacenar en la caché de todas las páginas de su sitio después de la primera carga.

 Adobe

Obtén ayuda de forma más rápida y sencilla

¿Nuevo usuario?

Adobe MAX 2024

Adobe MAX
La conferencia de creatividad

Del 14 al 16 de octubre en Miami Beach y en línea

Adobe MAX

La conferencia de creatividad

Del 14 al 16 de octubre en Miami Beach y en línea

Adobe MAX 2024

Adobe MAX
La conferencia de creatividad

Del 14 al 16 de octubre en Miami Beach y en línea

Adobe MAX

La conferencia de creatividad

Del 14 al 16 de octubre en Miami Beach y en línea