Optimiza las fuentes cargando menos glifos y estilos necesarios, mostrando texto legible mientras llegan los archivos y eligiendo una alternativa compatible con la tipografía final. WOFF2, los subconjuntos y la precarga selectiva abordan transferencia y descubrimiento; font-display y las métricas de respaldo controlan el renderizado. Mide visibilidad inicial y estabilidad: una descarga rápida no impide por sí sola que una sustitución tardía mueva el contenido.
Localiza el retraso antes de cambiar la fuente
Normalmente el navegador descubre las fuentes mediante CSS. Debe encontrar la hoja, interpretar @font-face y determinar qué cara necesita el texto antes de solicitar el archivo. Una hoja lenta o una cadena de importaciones puede retrasar incluso un archivo pequeño.
Filtra las fuentes en Network e inspecciona el iniciador. Registra qué hoja provocó la solicitud y si la cara se utiliza en el primer viewport. Comprueba la fuente realmente renderizada en DevTools: no supongas que la primera familia del CSS dibuja todos los caracteres.
Una frase puede utilizar varias alternativas si faltan glifos. Importa para puntuación, monedas, nombres y texto mixto. Un párrafo latino correcto no demuestra cobertura completa en coreano o hebreo.
Observa una carga lenta sin caché. Texto invisible apunta a la política de presentación; texto que cambia de ancho, a métricas incompatibles; una solicitud tardía, al descubrimiento. Utiliza la guía LCP si el bloque principal es texto y la guía de cambios de diseño si predomina el movimiento.
Reduce las caras y los glifos enviados
WOFF2 es un punto de partida habitual para navegadores modernos. Conserva los originales en los recursos de compilación, pero no envíes formatos antiguos sin una necesidad de compatibilidad. Revisa la licencia antes de alojar, modificar o crear subconjuntos: poder descargar un archivo no autoriza a redistribuir derivados.
Inventaría familias, pesos y estilos utilizados. Quizá el diseño no necesita todos los pesos, cursivas y variantes disponibles. Elimina declaraciones y solicitudes innecesarias en origen. Después comprueba negritas y cursivas para evitar una síntesis inesperada de estilos que debían proporcionarse.
Crear subconjuntos produce archivos con determinados glifos y las tablas necesarias para dibujarlos. unicode-range indica qué puntos de código cubre una cara; no elimina físicamente glifos del archivo. Para reducir bytes, el archivo referenciado debe ser realmente un subconjunto.
Esta declaración ilustrativa presupone que el archivo existe y contiene los caracteres anunciados.
@font-face {
font-family: "Editorial Sans";
src: url("/fonts/editorial-sans-latin-regular.woff2") format("woff2");
font-style: normal;
font-weight: 400;
font-display: swap;
unicode-range: U+0000-00FF;
}
body {
font-family: "Editorial Sans", Arial, sans-serif;
}El intervalo no constituye una estrategia multilingüe completa. Omite caracteres de otras escrituras y no sirve como único subconjunto para este sitio de seis idiomas. Incluye conformación, puntuación y marcas necesarias en las pruebas. Declarar cobertura no crea glifos ausentes.
Mantén límites sostenibles. Una fuente diminuta por artículo puede ahorrar bytes locales, pero reducir la reutilización y complicar actualizaciones. En contenido editorial cambiante, los subconjuntos estables por idioma o escritura son un punto de partida manejable. Mide las solicitudes reales antes de fragmentar más.
Elige font-display como política de lectura
font-display es un descriptor dentro de @font-face. Controla el texto mientras esa cara no está disponible; colocarlo en body no configura una cara. Equilibra lectura inmediata, aparición final de la tipografía y sustitución visible.
Los periodos siguientes los controla el navegador, no un cronómetro portable exacto.
| Valor | Comportamiento práctico | Compensación principal |
|---|---|---|
auto |
El navegador decide | Menos control explícito inicial |
block |
Bloqueo corto y sustitución ilimitada | El texto puede ser invisible al principio |
swap |
Bloqueo extremadamente corto y sustitución ilimitada | Lectura temprana, pero posible movimiento tardío |
fallback |
Bloqueo muy corto y sustitución corta | La fuente final puede no reemplazar la alternativa después |
optional |
Bloqueo muy corto, sin periodo de sustitución | La visita puede conservar la alternativa |
swap permite que la fuente termine apareciendo, pero no resuelve CLS automáticamente. Otras anchuras o métricas pueden cambiar líneas y desplazar el contenido inferior. optional evita una sustitución tardía, pero el diseño debe funcionar con la fuente de respaldo.
Un logotipo tipográfico y un artículo largo pueden justificar decisiones diferentes. No ocultes el texto para proteger una preferencia de marca. Prueba contenido y dispositivos reales: una configuración satisfactoria con caché puede distraer en la primera visita.
Consulta la referencia de font-display. Prueba después solicitudes bloqueadas y entrega normal para diseñar deliberadamente el estado alternativo.
Precarga solo una cara verdaderamente crítica
La precarga adelanta una solicitud respecto al descubrimiento normal por CSS, pero consume ancho de banda cuando compiten HTML, CSS e imagen LCP. Precargar todos los pesos y subconjuntos anula buena parte de la selección bajo demanda.
Este ejemplo precarga una cara del primer viewport y utiliza exactamente la misma URL en CSS.
<link rel="preload"
href="/fonts/editorial-sans-latin-regular.woff2"
as="font" type="font/woff2" crossorigin>
<style>
@font-face {
font-family: "Editorial Sans";
src: url("/fonts/editorial-sans-latin-regular.woff2") format("woff2");
font-style: normal;
font-weight: 400;
font-display: swap;
}
</style>Las precargas necesitan el modo CORS adecuado incluso en alojamiento propio. En otro origen, la respuesta también debe permitir la solicitud. Haz coincidir URL, tipo y modo para reutilizar la precarga sin una segunda descarga.
Precargar no aplica la fuente. Confirma que se utiliza pronto y que Console no informa de una precarga sin uso. Compara la cascada antes y después: adelantar la fuente a costa de una imagen más importante puede ser una mala compensación.
Con servicios externos, revisa por separado el origen de la hoja y el de los archivos. Un preconnect selectivo puede reducir el establecimiento de conexión, pero no elimina el descubrimiento del CSS ni garantiza una mejora. No lo añadas a todos los dominios externos.
Ajusta las métricas de la alternativa
Dos tipografías parecidas pueden ocupar espacios distintos. Compara anchuras, altura de x, ascendentes, descendentes e interlineado. El salto de línea suele importar más que pequeñas diferencias de forma, porque una línea adicional desplaza el resto.
size-adjust escala contornos y métricas. ascent-override, descent-override y line-gap-override permiten ajustar métricas verticales. Calcula los valores para la pareja real de fuentes; no existe un porcentaje universal.
El ejemplo demuestra la sintaxis con valores ilustrativos, no una calibración de una fuente real «Editorial Sans». Sustitúyelos tras medir tus archivos.
@font-face {
font-family: "Editorial Fallback";
src: local("Arial");
size-adjust: 100%;
ascent-override: 90%;
descent-override: 22%;
line-gap-override: 0%;
}
.article-body {
font-family: "Editorial Sans", "Editorial Fallback", sans-serif;
line-height: 1.6;
}La fuente local debe existir en el dispositivo. Conserva una familia genérica al final y prueba sistemas donde falte la fuente nombrada. Los ajustes reducen diferencias pero no garantizan saltos idénticos en todas las cadenas.
Compara encabezados, etiquetas largas, números, puntuación y párrafos. Usa texto traducido, no una muestra inglesa repetida. Un interlineado explícito estabiliza el ritmo vertical, pero no evita cambios de línea por anchuras distintas.
Compara fuentes variables con los estilos necesarios
Una fuente variable puede representar varios pesos u otros ejes en un archivo y sustituir varias caras estáticas. No significa que siempre sea menor que uno o dos estilos estáticos realmente utilizados. Compara subconjuntos y ejes entregados, no la descripción comercial.
La declaración expone pesos de 100 a 900, suponiendo que el archivo admite ese intervalo.
@font-face {
font-family: "Editorial Variable";
src: url("/fonts/editorial-variable-latin.woff2") format("woff2");
font-style: normal;
font-weight: 100 900;
font-display: swap;
}
h1 { font-family: "Editorial Variable", sans-serif; font-weight: 650; }No declares ejes inexistentes. Comprueba la cursiva por separado y respeta el uso documentado. Si tus herramientas reducen ejes, verifica aspecto y funcionamiento: eliminar uno inesperadamente puede cambiar el diseño sin un error evidente.
Planifica coreano, hebreo y fuentes del sistema
El coreano exige más cobertura que una interfaz latina. Un archivo CJK completo puede ser grande; un subconjunto por página demasiado agresivo puede omitir texto dinámico, nombres o publicaciones nuevas. Considera subconjuntos estables, segmentación documentada de un servicio o una pila del sistema probada. Inspecciona solicitudes coreanas con abreviaturas latinas y números.
El hebreo necesita sus caracteres, puntuación y marcas admitidas, además del latín técnico. La fuente no establece la dirección del documento. Mantén el comportamiento RTL y bidireccional separado de la carga tipográfica y prueba etiquetas de código, números y signos en contexto.
El alojamiento propio controla URL, caché y actualizaciones. Un servicio puede gestionar formatos y segmentación, pero añade hojas y orígenes. Ninguna opción es siempre más rápida. Compara dependencias reales, responsabilidad operativa y privacidad.
Las fuentes del sistema son una elección final válida. Evitan una transferencia personalizada y pueden aparecer pronto, aunque aspecto y métricas varían por plataforma. Diseña una pila intencional y prueba todas las escrituras. Eliminar una descarga sirve cuando legibilidad, jerarquía y cobertura siguen siendo correctas.
Verifica un cambio tipográfico en estados reales
Empieza por una página donde las fuentes afectan al primer viewport. Registra solicitudes, aparición del texto legible y movimientos. Repite con caché fría, caliente y fuentes bloqueadas. Incluye una página coreana y una hebrea si existen esas ediciones.
Después de cambiar caras, subconjuntos o precargas, busca descargas duplicadas, glifos ausentes y pesos sintetizados. Revisa traza y aspecto juntos. Un archivo menor es un resultado intermedio; el objetivo es texto legible y estable.
Anota archivos y política en la lista de comprobación de rendimiento. Si el descubrimiento sigue retrasado, continúa con recursos que bloquean el renderizado. Integra la prueba en la optimización de velocidad para que un rediseño no vuelva a introducir caras innecesarias o alternativas inestables.
