Búsqueda de sitios web

javascript - ¿Precargar fuentes @font-face?

¿Es posible precargar o de otro modo almacenar en caché las fuentes @font-face, probablemente con JavaScript, antes de que se cargue la página para que no aparezca ese salto feo cuando la página finalmente se carga?

Respuesta #1

Desde 2017 has precargado

MDN: El valor preload del atributo rel del elemento permite escribir solicitudes de obtención declarativas en tu HTML, especificando recursos que tus páginas necesitarán muy pronto después de cargar, los cuales, por lo tanto, deseas comenzar a precargar temprano en el ciclo de vida de la carga de una página, antes de que entre en funcionamiento la maquinaria principal de renderizado del navegador. Esto garantiza que estén disponibles antes y es menos probable que bloqueen la primera renderización de la página, lo que conduce a mejoras en el rendimiento.

<link rel="preload" href="/fonts/myfont.eot" as="font" crossorigin="anonymous" />
<link rel="preload" href="/fonts/mywofffont.woff2" as="font" type="font/woff2" crossorigin>

Verifique siempre la compatibilidad del navegador.

Es más útil para la precarga de fuentes (no esperar a que el navegador las encuentre en algún CSS). También puedes precargar algunos logotipos, iconos y scripts.

  • Otras técnicas, con sus pros y contras, se discuten aquí (no es mi blog).
  • También vea prefetch (similar) y la pregunta en SO sobre preload vs prefetch.

Respuesta #2

Una técnica simple es poner esto en algún lugar de tu índice:

<div class="font_preload" style="opacity: 0">
    <span style="font-family: 'myfontface#1font-family', Arial, sans-serif;"></span>
    <span style="font-family: 'myfontface#2font-family', Arial, sans-serif;"></span>
    ...
</div>

Probado en Chrome 34, Safari 7 y FF 29 e IE 11

Respuesta #3

Evita FOIT: Destello de texto invisible

Un primer paso, sin duda, es precargar la fuente en HTML:

<link rel="preload" href="pacifico.woff2" as="font" crossorigin="anonymous">

Por favor, tenga en cuenta que las fuentes siempre se cargan previamente con el intercambio de recursos de origen cruzado (CORS) habilitado, aunque la fuente resida en el mismo servidor:

Al precargar recursos que se obtienen con CORS habilitado (por ejemplo, fetch(), XMLHttpRequest o fuentes), se debe tener especial cuidado al configurar el atributo crossorigin en su elemento. El atributo debe configurarse para que coincida con el CORS y el modo de credenciales del recurso, incluso cuando la obtención no sea de origen cruzado.

Por lo tanto, el atributo crossorigin="anonymous" es absolutamente necesario.

Lo mismo no se puede decir sobre el atributo opcional type="MIME-type". Hay mucha discordancia entre navegadores e instituciones sobre qué tipo MIME deberían tener las fuentes. Si se indica un tipo incorrecto para cierto navegador, el archivo de fuente no se cargará previamente. Por lo tanto, es mejor abstenerse de usar el atributo HTML type="MIME-type" por completo.

Luego, está lo que los niños populares llaman FOIT; el destello de texto invisible. En los navegadores modernos, este FOIT se puede evitar fácilmente agregando la propiedad font-display: swap; a la declaración CSS @font-face.

@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'), url(pacifico.woff2) format('woff2');
  font-display: swap;
}

Respuesta #4

Tu encabezado debería incluir el preload rel de la siguiente manera:

<head>
    ...
    <link rel="preload" as="font" href="/somefolder/font-one.woff2">
    <link rel="preload" as="font" href="/somefolder/font-two.woff2">
</head>

De esta manera, woff2 será precargado por los navegadores que soportan preload, y todos los formatos de respaldo se cargarán como normalmente lo hacen.
Y tu font face en CSS debería verse similar a esto

@font-face {
    font-family: FontOne;
    src: url(../somefolder/font-one.eot);
    src: url(../somefolder/font-one.eot?#iefix) format('embedded-opentype'),
    url(../somefolder/font-one.woff2) format('woff2'), //Will be preloaded
    url(../somefolder/font-one.woff) format('woff'),
    url(../somefolder/font-one.ttf)  format('truetype'),
    url(../somefolder/font-one.svg#svgFontName) format('svg'); 
}
@font-face {
    font-family: FontTwo;
    src: url(../somefolder/font-two.eot);
    src: url(../somefolder/font-two.eot?#iefix) format('embedded-opentype'),
    url(../somefolder/font-two.woff2) format('woff2'), //Will be preloaded
    url(../somefolder/font-two.woff) format('woff'),
    url(../somefolder/font-two.ttf)  format('truetype'),
    url(../somefolder/font-two.svg#svgFontName) format('svg');
}

Respuesta #5

Hay algunas técnicas para "preload" aquí: http://paulirish.com/2009/fighting-the-font-face-fout/

Principalmente engañando al navegador para que descargue el archivo lo más rápido posible..

También puedes entregarlo como un data-uri, lo cual ayuda mucho. y también podrías ocultar el contenido de la página y mostrarlo cuando esté listo.

Artículos relacionados