Decidir el comportamiento de una fuente web mientras se carga puede ser una técnica importante de ajuste del rendimiento. El nuevo descriptor de visualización de fuentes para @font-face permite a los desarrolladores decidir el modo en que se renderizarán sus fuentes web (o su resguardo), en función del tiempo que tarden en cargarse.
Diferencias en el procesamiento de fuentes en la actualidad
Web Fonts les brinda a los desarrolladores la capacidad de incorporar tipografía enriquecida en sus proyectos, con la desventaja de que, si el usuario aún no tiene un tipo de letra, el navegador debe dedicar tiempo a descargarlo. Debido a que las redes pueden ser inestables, este tiempo de descarga tiene el potencial de afectar de forma negativa la experiencia del usuario. Después de todo, a nadie le importará lo bonito que sea tu texto si tarda demasiado tiempo en mostrarse.
Para mitigar parte del riesgo de una descarga lenta de la fuente, la mayoría de los navegadores implementan un tiempo de espera después del cual se usa una fuente de resguardo. Esta es una técnica útil, pero, desafortunadamente, los navegadores difieren en la implementación real.
| Navegador | Tiempo de espera | Resguardo | Cambiar |
|---|---|---|---|
| Chrome 35 y versiones posteriores | 3 segundos | Sí | Sí |
| Ópera | 3 segundos | Sí | Sí |
| Firefox | 3 segundos | Sí | Sí |
| Internet Explorer | 0 segundos | Sí | Sí |
| Safari | Sin tiempo de espera | N/A | N/A |
- Chrome y Firefox tienen un tiempo de espera de tres segundos. Después de ese tiempo, el texto se muestra con la fuente de resguardo. Si la fuente logra descargarse, finalmente se produce un intercambio y el texto se vuelve a renderizar con la fuente deseada.
- Internet Explorer tiene un tiempo de espera de cero segundos, lo que genera la renderización inmediata de texto. Si la fuente solicitada aún no está disponible, se usa una alternativa y el texto se vuelve a renderizar una vez que la fuente solicitada está disponible.
- Safari no tiene un comportamiento de tiempo de espera (o al menos nada más allá del tiempo de espera de la red de referencia).
Para empeorar la situación, los desarrolladores tienen un control limitado para decidir cómo afectarán estas reglas su aplicación. Es posible que un desarrollador enfocado en el rendimiento prefiera tener una experiencia inicial más rápida con una fuente de resguardo y solo aprovechar una fuente web más atractiva en visitas posteriores después de que haya tenido la oportunidad de descargarse. Con herramientas como la API de Font Loading, es posible anular algunos de los comportamientos predeterminados del navegador y lograr mejoras de rendimiento, pero esto conlleva la necesidad de escribir cantidades importantes de JavaScript que luego se deben alinear en la página o solicitar desde un archivo externo, lo que genera latencia de HTTP adicional.
Para solucionar esta situación, el grupo de trabajo de CSS propuso un nuevo descriptor @font-face, font-display, y una propiedad correspondiente para controlar cómo se renderiza una fuente descargable antes de que se cargue por completo.
Cronograma de descarga de fuentes
Al igual que los comportamientos de tiempo de espera de la fuente existentes que implementan algunos navegadores hoy en día, font-display segmenta la vida útil de una descarga de fuente en tres períodos principales.
- El primer período es el período de bloqueo de fuente. Durante este período, si no se carga el tipo de fuente, cualquier elemento que intente usarla debe renderizarse con un tipo de fuente de resguardo invisible. Si el tipo de fuente se carga correctamente durante el período de bloqueo, se usa con normalidad.
- El período de intercambio de fuente ocurre inmediatamente después del período de bloqueo de fuentes. Durante este período, si el tipo de fuente no se carga, cualquier elemento que intente usarla debe renderizarse con un tipo de fuente de resguardo. Si el tipo de fuente se carga correctamente durante el período de intercambio, se usa de manera normal.
- El período de error de fuente ocurre inmediatamente después del período de intercambio. Si el tipo de fuente aún no se cargó cuando comienza este período, se marca como una carga con errores, lo que provoca un resguardo de fuente normal. De lo contrario, el tipo de fuente se utiliza normalmente.
Si comprendes estos períodos, podrás usar font-display para decidir cómo se debe renderizar la fuente según si se descargó o cuándo se descargó.
¿Qué tipo de pantalla es la adecuada para ti?
Para trabajar con el descriptor font-display, agrégalo a tus reglas at-rules de @font-face:
@font-face {
font-family: 'Arvo';
font-display: auto;
src: local('Arvo'), url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
}
Actualmente, font-display admite el siguiente rango de valores: auto | block | swap | fallback | optional.
automático
auto usa la estrategia de visualización de fuente que utiliza el usuario-agente. La mayoría de los navegadores actualmente tienen una estrategia predeterminada similar a block.
bloquear
block le da al tipo de fuente un breve período de bloqueo (se recomiendan 3 s en la mayoría de los casos) y un período de intercambio infinito. En otras palabras, el navegador dibuja texto "invisible" al principio si la fuente no está cargada, pero intercambia el tipo de fuente en cuanto se carga. Para ello, el navegador crea un tipo de fuente anónima con métricas similares a la fuente seleccionada, pero todos los glifos no contienen "tinta". Este valor solo debe usarse si se requiere la renderización de texto en un tipo de letra en particular para que se pueda usar la página.
Cambio
swap le da al tipo de fuente un período de bloqueo de cero segundos y un período de intercambio infinito. Esto significa que el navegador genera texto de inmediato con un resguardo si el tipo de fuente no está cargado, pero lo intercambia en cuanto se carga. Al igual que block, este valor solo debe usarse cuando la renderización de texto en una fuente específica es importante para la página, pero renderizar en cualquier fuente mostrará el mensaje correcto. El texto del logotipo es un buen candidato para el intercambio, ya que mostrar el nombre de una empresa con un resguardo razonable servirá para transmitir el mensaje, pero, en última instancia, usarás el tipo de letra oficial.
resguardo
fallback le da al tipo de fuente un período de bloqueo extremadamente pequeño (se recomiendan 100 ms o menos en la mayoría de los casos) y un período de intercambio corto (se recomiendan tres segundos en la mayoría de los casos). En otras palabras, el tipo de fuente se renderiza con un resguardo al principio si no está cargado, pero la fuente se intercambia en cuanto se carga. Sin embargo, si transcurre demasiado tiempo, el resguardo se usará durante el resto de la página. El resguardo es un buen candidato para elementos como el texto del cuerpo, en los que te gustaría que el usuario comience a leer lo antes posible y no quieras alterar su experiencia cambiando el texto a medida que se carga una fuente nueva.
opcional
Opcional le da al tipo de fuente un período de bloqueo extremadamente pequeño (se recomiendan 100 ms o menos en la mayoría de los casos) y un período de intercambio de cero segundos. Al igual que con el resguardo, esta es una buena opción para cuando la fuente de descarga es más "deseable", pero no es fundamental para la experiencia. El valor optional deja que el navegador decida si desea iniciar la descarga de la fuente. Puede optar por no hacerlo o hacerlo con una prioridad baja según lo que considere mejor para el usuario. Esto puede ser beneficioso en situaciones en las que el usuario tiene una conexión débil y extraer una fuente puede no ser el mejor uso de los recursos.
Navegadores compatibles
Actualmente, font-display está detrás de la marca Funciones experimentales de la plataforma web en Chrome 49 para computadoras de escritorio y se distribuye en Opera y Opera para Android.
Demostración
Consulta el ejemplo para probar font-display. Para los desarrolladores que se enfocan en el rendimiento,
puede ser una herramienta más útil.