fontstay.devGuía
Una breve explicación de lo que hace el CSS generado y por qué evita que el texto salte cuando llega tu fuente web.
Por qué las fuentes desplazan el diseño
Mientras se carga una fuente web, el navegador dibuja el texto con una fuente de respaldo. Cuando llega la fuente web, el texto se vuelve a dibujar: si los glifos son más anchos o las líneas más altas, las líneas se ajustan de otra manera y todo lo que hay debajo se mueve. Google mide esto como Cumulative Layout Shift (CLS): 0,1 o menos es bueno, más de 0,25 es deficiente. Hacer que la fuente de respaldo coincida con las métricas de la fuente web mantiene las líneas en su sitio.
Los descriptores de @font-face que generamos
Cada respaldo es una fuente del sistema local() declarada con descriptores que la reescalan: size-adjust escala los glifos para que el texto tenga el mismo ancho, y ascent-override, descent-override y line-gap-override fijan las métricas verticales para que las líneas tengan la misma altura. La pila font-family enumera primero la fuente web, luego los respaldos ajustados y por último una familia genérica.
@font-face {
font-family: "Inter Fallback Arial";
src: local("Arial");
size-adjust: 107.12%;
ascent-override: 90.44%;
descent-override: 22.52%;
line-gap-override: 0%;
unicode-range: U+20-7E, U+A0-FF;
}
body {
font-family: "Inter", "Inter Fallback Arial", sans-serif;
}| Descriptor | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
size-adjust | 92 | 92 | 92 | 17 |
ascent-override | 87 | 87 | 89 | — |
descent-override | 87 | 87 | 89 | — |
line-gap-override | 87 | 87 | 89 | — |
font-size-adjust | 127 | 127 | 3 | 16.4 |
unicode-range | 1 | 12 | 36 | 3.1 |
— significa no compatible, ? significa desconocido. Los navegadores que carecen de un descriptor simplemente lo ignoran, por lo que el CSS es seguro en todas partes.
Safari y los overrides verticales
Safari es compatible con size-adjust (desde la 17) pero no con ascent-override, descent-override ni line-gap-override. Para esos navegadores el generador añade font-size-adjust, que iguala la altura de la x de la fuente web, y un line-height fijo, que hace que la caja de línea sea independiente de las métricas del respaldo.
unicode-range
Una variante con unicode-range se usa solo para los puntos de código indicados. Limitar los respaldos ajustados a los caracteres que cubre la fuente web evita que el ajuste se aplique a glifos que la fuente web nunca dibujará. Los rangos se compactan sin pérdida (los puntos de código adyacentes se fusionan) y coinciden con los subconjuntos usados por Google Fonts.
Formatos de fuente
Usa WOFF2 para la web: es el más pequeño y todos los navegadores actuales lo admiten. Los archivos WOFF, TrueType (TTF) y OpenType (OTF) también funcionan con @font-face. Las colecciones de fuentes (TTC, OTC) no se pueden usar directamente en un navegador, por lo que esta herramienta las divide en fuentes independientes.
Licencias de fuentes
Un archivo de fuente es software y su licencia decide si puedes ponerlo en un sitio web. El CSS generado solo hace referencia a fuentes ya instaladas en el sistema del visitante (local()), pero la fuente web que sirvas debe tener licencia para ello:
- SIL Open Font License (OFL): uso e incrustación libres, la fuente no puede venderse por sí sola.
- Apache License 2.0: uso e incrustación libres con el aviso de licencia.
- Ubuntu Font Licence (UFL): uso e incrustación libres, las versiones modificadas deben cambiar de nombre.
- Las licencias comerciales y de escritorio a menudo no cubren la incrustación web: comprueba si hay una licencia web aparte.
El texto y la URL de la licencia están en la tabla name de la fuente (name IDs 13 y 14) y los permisos de incrustación en la tabla OS/2 (fsType). Lee siempre también la licencia en el origen de la fuente.