¿Hay alguna manera real de evitar la carga diferida de font-face?Evite la carga retrasada de font-face
Hay una entrada de blog de Paul Irish about this FOUT (flash del texto sin estilo). Es de 2009.
¿Hay algún progreso en los últimos 3 años?
Estás sacando dos problemas por separado.
Un retraso en la descarga de los archivos de fuentes reales es esencialmente inevitable, aunque puede evitarlo al no incluir nada que realmente no necesite, con el fin de minimizar el tamaño del archivo en general. Dependiendo del servicio/método que esté utilizando, esto podría implicar reducir los juegos de caracteres (/ idiomas) que incluye, así como los pesos y estilos.
En cuanto al flash de texto sin estilo, eso es casi inevitable, en parte debido al problema de tiempo de descarga anterior. Pero una vez que haya reducido tanto como pueda, debe implementar un cargador de fuentes para tener un mejor control de esta parte. Aquí está TypeKit's (open-sourced) implementation, y brief explanatory blog post. El ejemplo al final se dirige específicamente a FOUT; puedes simplemente dejarlo caer en tu propio código.
Aquí hay algunos information from FontDeck sobre cómo usar el cargador de Google con su servicio, lo que también los llevará a utilizarlo para el servicio WebFonts de Google.
Cualquier otro servicio, tendrá que comenzar a hacer su propia investigación, pero esos son los conceptos generales. Con esas herramientas, puede usar un poco de secuencias de comandos y reglas de CSS para ocultar el texto afectado hasta que las fuentes estén listas para su presentación, entre otros usos. No es completamente idea, pero al menos previene el FOUT. Una vez pasada esa hora inicial, la memoria caché del navegador debería tomar el control y hacer que sea en gran parte discutible.
'try {Typekit.load();} catch (e) {}' de la implementación de TypeKit mucho lo dice todo: el documento no se procesará hasta que se ejecute el guión, de modo que si no le importa hacer que los usuarios esperen un tiempo adicional (con suerte medido en milisegundos), entonces esto funciona ... si le importa hacer su página tan rápido como sea posible, esto no funciona. (... y si los usuarios no se quedan el tiempo suficiente para ver su sitio * final * cargando, en realidad no importa cómo se ve su sitio :) – danlefree
Vale la pena mencionar las fuentes incrustadas data-uri como una opción. Evita las solicitudes HTTP adicionales. – jason
A) Caché de las fuentes mediante el establecimiento de la Cache-Control y Content-Type correctamente:
Cache-Control:public, max-age=15552000
Content-Type:application/x-font-woff;charset=UTF-8 (differs for other font files)
B) Evitar https para la cabecera Vary. Solo configure Accet-Encoding. El Vary: https breaks IE font loading.
Vary:Accept-Encoding
https://github.com/typekit/webfontloader
C) A y B debería funcionar perfectamente después de la primera solicitud, cuando el navegador ya se ha cargado la fuente. Si esto no es suficiente, intente Web Font Loader.
Cuando hace referencia a la información que ha encontrado, generalmente es una buena idea vincularla. –
Esta es una nueva publicación relacionada con este tema que encontré útil: https://michael.stapelberg.de/Artikel/font-loading –