Hoy damos por hecho las fuentes web. No siempre tuvimos la opción de configurar nuestro texto en casi cualquier tipo de letra. Quiero decir, podríamos, pero luego tendríamos que suspirar y decir: "Bueno, eso se verá bien en las computadoras de aproximadamente cinco personas". Espero que a todos los demás les guste Verdana! "

Las fuentes web aportaron una variedad muy necesaria a la vista, algunos abusos de la tipografía, un peso de página adicional a medida que se cargaron las fuentes y destellos de texto sin estilo o invisible. Bueno ... tortilla, huevos, romper, entiendes la idea. Tenía que suceder.

Si los usuarios están atascados mirando una página en blanco durante demasiado tiempo, pueden decidir irse

Sin embargo, es un problema de usabilidad cuando el texto es invisible hasta que se carga la fuente personalizada. Si los usuarios están atascados mirando una página en blanco durante demasiado tiempo (y demasiado tiempo puede ser de milisegundos), es posible que decidan irse. Y eso es justo. No es fácil de usar.

Avanzamos unos años y estamos progresando en el control de la carga de fuentes. Hasta ahora, lo hemos hecho con bibliotecas y API de terceros. Pero ahora, finalmente, esta funcionalidad está llegando a CSS.

Ingrese la propiedad font-display . Actualmente solo está disponible en Opera, Opera para Android y Chrome. (Se introdujo por primera vez en Chrome 49 como una característica experimental).

Viene con cuatro opciones: automático , de intercambio , alternativo y opcional .

Básicamente, elegir font-display: auto dejará el navegador para actuar como lo hace ahora. El texto será invisible hasta que se cargue la fuente personalizada.

el intercambio es probablemente lo que la mayoría de la gente usará. Si la fuente no está cargada, se usará la siguiente fuente disponible definida en la propiedad de la familia de fuentes . Cuando se carga la fuente web, se reemplazará. Esto es básicamente un flash de contenido sin estilo, pero eso es más fácil de usar que el contenido invisible, creo.

el repliegue divide la diferencia entre esas dos primeras opciones. Para un retraso de 100 milisegundos, el texto será invisible. Si la fuente personalizada está cargada para entonces, se usará. De lo contrario, la siguiente fuente en la línea de sucesión prevalecerá hasta que se cargue la fuente personalizada.

opcional funciona como alternativa, excepto que el navegador puede decidir no cargar la fuente personalizada en absoluto, si la conexión del usuario es demasiado lenta

la opción funciona como alternativa, excepto que el navegador puede decidir no cargar la fuente personalizada en absoluto, si la conexión del usuario es demasiado lenta.

Y ahí lo tenemos. declaration. Eso sí, la fuente de la pantalla está destinada a ser utilizada en una declaración @ font-face . Eso significa que no funcionará con proveedores de fuentes de terceros como Typekit o Google Fonts por el momento. Sin embargo, una vez que la visualización de fuentes se generalice, es probable que implementen algún tipo de opción para esta función.