La historia de FOUT es tan fascinante. Los navegadores solían hacerlo: mostrar una fuente de “alternativa” mientras se carga una fuente personalizada, luego quitar el texto una vez que lo haya hecho. La industria lo odiaba un poco, porque se sentía entrecortado y podía causar un rediseño. Así que los navegadores cambiaron y comenzaron a ocultar el texto hasta que se cargó la fuente personalizada. La industria odiaba eso aún más. ¡Nada peor que una página sin texto!
La carga de fuentes se volvió increíblemente complicada. Mira este video de Zach Leatherman y yo hablándolo.
Ahora los navegadores están diciendo, ¿por qué no le devolvemos el control en forma de API y CSS? Puede tomar el control del comportamiento con la propiedad font-display (spec).
Parece que font-display: swap; recibe la mayor parte de la atención. Es por una buena razón. Ese es el valor que trae de vuelta FOUT de la manera más fuerte. El navegador no esperará en absoluto por una fuente descargada. Mostrará el texto inmediatamente en la fuente que mejor coincida y esté disponible en la pila, luego, si/cuando se cargue una fuente de mayor coincidencia, se “cambiará” a esa.
@font-face {
font-family: Merriweather;
src: url(/path/to/fonts/Merriweather.woff) format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}
body {
font-family: Merriweather, /* Use this if it's immediately available, or swap to it if it gets downloaded within a few seconds */
Georgia, /* Use this if Merriweather isn't downloaded yet. */
serif; /* Bottom of the stack. System doesn't have Georgia. */
}La gente quería recuperar su FOUT, lo consiguieron. Bueno, tan pronto como font-display es compatible con su navegador, de todos modos. En este momento, estamos viendo a Chrome 60+ como el único navegador que lo incluye (lo que significa que no pasará mucho tiempo para el resto del clan Blink). Ya está detrás de una bandera en Firefox, por lo que es una buena señal.
Pero, ¿y si no te gusta especialmente FOUT?
Una opción hay font-display: fallback;. Tiene un nombre un poco extraño, ya que se parece mucho al comportamiento predeterminado (auto o block). La diferencia es que tiene un período de espera muy corto (“período de bloqueo de fuente”), ~100 ms, donde no se muestra nada si la fuente no está lista para funcionar en ese período súper corto, en su lugar se mostrará un respaldo. Luego, la fuente tiene ~3 segundos para cargarse y se intercambiará; de lo contrario, nunca lo hará.
Eso parece bastante razonable. Lo que estás evitando es un canje tardío, que es cuando es más incómodo. Todavía ese riesgo de FOUT sin embargo.
Si prefiere que, si la fuente web no está disponible de inmediato, solo muestre la fuente alternativa y nunca cambie a ella, incluso después de que se haya descargado. ¡Usted puede! eso es lo que font-display: optional; lo hace. Todavía da el período de bloque de fuente de ~ 100 ms (lo que le da a la fuente la oportunidad de mostrarse en la vista de la primera página), pero después de eso, se muestra el respaldo y no se intercambiará. Lo más probable es que la fuente finalmente se descargó, y la vista de la próxima página se almacenará en caché y se usará.
Esto es font-display: optional; en Chrome 60. Con una memoria caché limpia, la página se carga con la fuente alternativa. La fuente se descarga, pero no se utiliza. Luego, con el caché preparado, la carga de la segunda página usa la fuente.
Estoy bastante abierto de mente aquí. puedo ver como font-display: swap; es ideal para la mejor accesibilidad del contenido. No soy un gran admirador de FOUT, así que puedo ver el atractivo de font-display: optional;. También puedo ver cómo font-display: fallback; un poco divide el medio.
Además de que el soporte del navegador es vital para hacer uso de esto, también está la cuestión de los proveedores de fuentes web que lo admiten. Por ejemplo, cuando usa los métodos de carga de fuentes predeterminados de Google Fonts, no tiene la oportunidad de usar font-display porque el @font-face los bloques provienen de las hojas de estilo alojadas en Google. Hay una discusión abierta al respecto. Hay formas de usar Google Fonts con las tuyas @font-face aunque bloques. Definitivamente consulte la guía de Zach Leatherman.