font-display: qué hacen realmente swap, block, fallback y optional

Qué controla font-display

Una fuente web tarda en llegar, y el navegador tiene que dibujar el texto antes. font-display es el descriptor que se pone dentro de una regla @font-face para decidir qué pasa mientras tanto: retener el texto hasta que la fuente esté lista, mostrarlo enseguida con una fuente de reserva e intercambiarlo después, o renunciar a la fuente si tarda demasiado. Los cinco valores son auto, block, swap, fallback y optional, y el inicial es auto.

Por debajo, la especificación describe un temporizador de descarga que atraviesa tres periodos. Durante el periodo de bloqueo, un elemento que usa la fuente debe dibujarse con una cara de reserva invisible. Durante el periodo de intercambio se dibuja con una de reserva normal. Y cuando empieza el periodo de fallo, una descarga sin terminar se marca como fallida y se aplica el mecanismo de reserva habitual para siempre. Cada valor de font-display no es más que una elección de cuánto duran los dos primeros periodos.

La parte invisible es más interesante de lo que sugiere su fama. La especificación no dice que el texto falte: dice que el navegador crea una cara anónima con las mismas métricas que la real pero con todos los glifos invisibles. El espacio ya está reservado con el tamaño correcto, así que cuando la fuente aterriza no se recoloca nada. El destello de texto invisible es un destello de espacio en blanco con la forma exacta.

Cómo se usa

1. Elige un valor y un tiempo de descarga. El tiempo va en milisegundos desde que el navegador arranca el temporizador. Los botones de ejemplo cubren una fuente que se descarga y se descarta, otra que muestra los tres estados uno tras otro, otra que retiene el texto y otra que no llega a mostrarse nunca.
2. Lee la línea de tiempo. Cada fila es un tramo de tiempo y lo que ve el lector durante él: espacio en blanco, una fuente de reserva o la tuya. La línea de resultado que hay debajo dice sin rodeos si la fuente llega a verse.
3. Cambia los periodos. Los tres campos de duración son editables a propósito, porque la especificación recomienda esas cifras en vez de exigirlas. Pon el periodo de bloqueo a cero, que es el propio ejemplo de la especificación sobre lo que un navegador puede permitir al lector, y verás desaparecer la fase invisible.

Todas las cifras de la tabla habitual son recomendaciones

Busca font-display y encontrarás la misma tabla en todas partes, con 3s y 100ms como si fueran fijos. No lo son, y la especificación es llamativamente cuidadosa al decirlo. block da un periodo de bloqueo corto, con 3s recomendado en la mayoría de los casos. swap da un periodo de bloqueo mínimo, con 100ms o menos recomendado en la mayoría de los casos. fallback combina los dos. Esos son los dos únicos números de todo el descriptor, y ambos vienen con la misma matización.

Además hay una nota que cubre los cinco valores a la vez: los navegadores pueden usar duraciones algo distintas, o comportamientos más sofisticados que la sintaxis ni siquiera puede expresar. Y va más lejos, al decir que un navegador puede dejar que el lector anule lo que eligió el autor, con el ejemplo de forzar que todas las fuentes tengan un periodo de bloqueo de cero segundos. Así que las cifras son orientativas por partida doble: el navegador no tiene por qué seguirlas, y el lector puede pasar por encima.

Por eso aquí se pueden editar en lugar de imprimirlas como constantes. Poner el bloqueo a cero elimina la fase invisible entera y el texto aparece de inmediato con una fuente de reserva; alargar el periodo de intercambio rescata una fuente que la cifra recomendada habría tirado. Ninguna de las dos cosas es hipotética: son comportamientos que la especificación permite explícitamente.

auto es el extremo sincero de todo esto. Su definición completa es que la política de visualización la decide el navegador. La especificación solo añade que muchos navegadores se comportan de forma parecida a block, que es una observación sobre el mundo y no una regla. Si escribes auto, o no escribes nada, no has elegido comportamiento alguno.

optional no tiene periodos

Todas las tablas copiadas dan a optional un periodo de bloqueo y otro de intercambio. La especificación no le da ninguno. Lo define por el resultado: si la fuente puede cargarse de inmediato, es decir, si está disponible para el primer pintado del texto, se usa; y si no, se trata como si sus dos periodos ya hubieran expirado.

Lo que viene después son dos reglas duras en lugar de duraciones. Una fuente optional nunca debe hacer que la maqueta de la página salte mientras carga, y una vez que el texto se ha pintado con una de reserva, no debe dibujarse con la fuente optional durante el resto de la vida de la página. Ni más tarde en la sesión ni en el siguiente pintado: la fuente queda fuera. Por eso el escenario optional de esta página muestra una sola fila que no cambia: sin cambio de fase no hay salto, que es justo el sentido del valor.

El navegador tiene aquí un margen inusual. Puede abortar la descarga en cuanto decide que no va a usar la fuente, puede descargarla con prioridad muy baja y, si cree que así sirve mejor al lector, puede ni siquiera empezar la descarga e ir directo a la de reserva. En la práctica eso suele significar que una fuente declarada optional se descarga en la primera visita, se ignora y se usa desde la caché en la segunda.

La lectura práctica es que optional no es una reserva más estricta. Es otra promesa: esta fuente está bien tenerla, pero nunca retrases ni molestes al lector por ella. Elegirla implica aceptar que algunos visitantes sencillamente no verán tu tipografía.

Lo que esto no te va a decir

Simula las reglas, no mide tu sitio. El tiempo de descarga es el número que has escrito, no uno observado en una red real, y aquí no se descarga ninguna fuente. Para saber cuánto tarda la tuya, usa el panel de red de tu navegador, y ten en cuenta que el temporizador arranca cuando el navegador intenta usar la cara por primera vez, que no es cuando se carga la hoja de estilos.

Como las duraciones son recomendaciones, la línea de tiempo es lo que haría un navegador que las siguiera, no necesariamente lo que hará el tuyo. Un navegador con otras cifras, con una política más sofisticada que la sintaxis no puede expresar, o que respete una anulación del lector, se comportará de otro modo y seguirá siendo conforme. Eso es un hecho del descriptor más que una limitación de esta página, y por eso las duraciones son editables.

Dos cosas quedan fuera del modelo. La especificación permite al navegador retrasar ligeramente el dibujado de un elemento que usa una fuente optional, para dar tiempo a una caché local quizá lenta, y no dice cuánto; así que la ventana que aquí se usa para de inmediato es un sustituto y no una cifra citada. Y la carga de fuentes se cruza con la precarga, con la API de carga de fuentes de CSS y con la prioridad que el navegador asigna a la petición, nada de lo cual se simula.

Por último, esto va de una sola cara. Una página con varias caras de una misma familia hace correr varios de estos temporizadores a la vez, y lo que ve el lector es la combinación, incluido el caso en que se intercambia la reserva de un grosor pero no la de otro.

¿Por qué es gratis?

Sacar una línea de tiempo de unos pocos números se hace en tu navegador. No hay servidor en medio, así que no hay nada que cobrar ni cuenta que crear.

No se sube nada y no se descarga ninguna fuente. Recarga la página y habrá olvidado lo que escribiste.