Guía del usuario Cancelar

Códigos incrustados

Buscar

Última actualización el 28 dic. 2022

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 web, correos 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=&quot;stylesheet&quot; href=&quot;https://use.typekit.net/xxxxxxx.css&quot;>

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(&quot;https://use.typekit.net/xxxxxxx.css&quot;);
</style>

O bien, en la parte superior de su archivo 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,&quot;&quot;)+&quot; wf-inactive&quot;;},config.scriptTimeout),tk=d.createElement(&quot;script&quot;),f=false,s=d.getElementsByTagName(&quot;script&quot;)[0],a;h.className+=&quot; wf-loading&quot;;tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!=&quot;complete&quot;&&a!=&quot;loaded&quot;)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=&quot;https://use.typekit.net/xxxxxxx.js&quot;></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>

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

<script src=&quot;//use.typekit.net/xxxxxxx.js&quot;></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.

Temas relacionados

¿Por qué mis fuentes web proceden de use.typekit.net?

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

¿Nuevo usuario?