¿Recuerdas FOUT? Cuando se usa una fuente personalizada a través de @ font-face, los navegadores solían mostrar una fuente alternativa en la pila de fuentes hasta que se cargaba la personalizada. Esto creó un “Destello de texto sin estilo” – lo cual era inquietante y podía provocar cambios de diseño. Trabajamos en técnicas para combatirlo, por ejemplo, hacer que el texto sea invisible hasta que la fuente esté lista.
Hace varios años, los navegadores comenzaron a cambiar su manejo de esto. Comenzaron a detectar si el texto estaba configurado en una fuente personalizada que aún no se había cargado y lo hicieron invisible hasta que la fuente se cargó (o pasaron X segundos). Eso es FOIT: “Destello de texto invisible”. Si un recurso de fuente falla o toma mucho tiempo, esos X segundos son demasiado largos para las personas que están legítimamente preocupadas por el rendimiento del tiempo de renderizado. En el peor de los casos, este comportamiento puede llevar a contenido permanentemente invisible.
En estos días estamos tratando de luchar contra FOIT de varias formas. En Carga de fuentes más rápida con eventos de fuentes, Jonathan Suh sugiere usar una biblioteca para detectar si se ha cargado una fuente personalizada y solo luego cambiar el nombre de una clase en el documento para establecer el texto en esa fuente. Esto hace que el comportamiento sea como FOUT: acelerar el contenido legible a costa de cambios visuales algo discordantes.
Zach Leatherman también ha escrito mucho sobre esto. En Better @ font-face con Font Load Events, también sugiere esperar a que se cargue la fuente antes de configurar una clase para configurar el tipo. También analiza lo que se necesita para activar la descarga de una fuente (no es tan simple como @font-face declaración). Scott Jehl corrobora esto en Font Loading Revisited with Font Events, que incluye un poco sobre cookies y almacenamiento en caché.
El último truco de Zach involucró a FOFT: “Destello de texto falso”. La idea aquí solo es esperar a que se cargue la variante romana de la fuente personalizada y configurar el texto de inmediato. Obliga al navegador a crear “falso negrita” y “falso cursiva” donde sea necesario, que se reemplazan por las versiones reales tan pronto como se descargan.
Vitaly Friedman escribió sobre su enfoque en Smashing Magazine donde realmente usan localStorage para almacenar en caché la fuente. Termina siendo como FOUT en la carga de la primera página y FOIT (rápido) en cargas posteriores.
Creo que es interesante cómo cambiamos estas cosas de vez en cuando. El navegador se comporta de una manera y nosotros lo engañamos para que se comporte de otra manera. Cambia de esa manera y lo engañamos para que se comporte de la manera anterior.