font-display: swap muestra la fuente alternativa inmediatamente y la intercambia cuando llega la fuente web. Sincero, y provoca el temblor del diseño que has visto miles de veces: el texto vuelve a fluir a mitad de la lectura, un título se mueve, un botón debajo se mueve. Las anulaciones de métricas resuelven esto falsificando el intercambio.

@font-face {
  font-family: "Gloock Fallback";
  src: local("Georgia");
  size-adjust: 104%;
  ascent-override: 92%;
  descent-override: 22%;
  line-gap-override: 0%;
}

:root {
  font-family: "Gloock", "Gloock Fallback", serif;
}

Por qué las anulaciones de métricas solucionan el reflujo

  • size-adjust escala el respaldo para que sus anchos renderizados queden cerca de los de la fuente web; el intercambio mueve solo unos pocos caracteres.
  • Las anulaciones de ascenso, descenso y separación de líneas fijan las métricas verticales del respaldo a las de la fuente web, de modo que los cuadros de línea dejen de reaparecer.
  • local() obtiene una fuente que el usuario ya tiene, por lo que el recurso alternativo nunca se descarga; todo el truco agrega cero bytes.
  • La fuente web en sí mantiene font-display: swap, por lo que la primera pintura nunca espera un archivo de fuente.

Derivando los números honestamente

  1. Cargue la fuente web y el recurso alternativo uno al lado del otro en una página de prueba, luego ajuste las cuatro anulaciones hasta que ambas cadenas ocupen el mismo cuadro; Los destellos de pintura de las herramientas de desarrollo del navegador muestran exactamente qué métrica está desactivada.
  2. La comunidad fontTools tiene una ruta de herramientas para derivar el ajuste de tamaño automáticamente a partir de dos archivos de fuentes; El ajuste manual por par también es de tres minutos.
  3. Volver a derivar cuando cambie cualquiera de las fuentes; una tabla de métricas son datos y los datos necesitan un propietario.
  4. Pruebe el número CLS en Lighthouse antes y después; El reflujo de este sitio se detuvo medido en cero en el cambio de titular.

Las fuentes son el único recurso que carga una página antes de poder pintar su propio texto, y las métricas alternativas son la única forma honesta de hacer que esa carga sea invisible. Ingeniería tipográfica muy interesante sin JavaScript en ninguna parte.