Reduce el trabajo tipográfico que cada ruta pide al navegador
Haz un inventario de las solicitudes de fuente con caché fría en la página de inicio, páginas de conversión, vistas autenticadas y plantillas con diferentes sistemas de diseño. Anota la familia, peso, estilo, archivo, origen, tamaño transferido y selector. Una regla declarada @font-face no desencadena por sí sola una descarga; normalmente un navegador solicita una face cuando el diseño actual la usa. Eso hace que valga la pena eliminar primero pesos y estilos globales no usados.
Usa tipografía personalizada donde aporte un valor real de marca, a menudo en títulos display, y considera una pila del sistema para el cuerpo cuando el diseño lo permita. No asumas que una fuente variable siempre es más pequeña: puede reemplazar varios archivos estáticos pero ser más grande que una única face estática. Compara los activos comprimidos que la ruta solicita realmente.
Elimina familias, pesos, itálicas y fuentes de iconos que no tengan uso probado a nivel de ruta.
Verifica que la licencia permita entrega web, subsetting y self-hosting antes de cambiar la build.
Usa WOFF2 y crea subconjuntos sin eliminar caracteres necesarios
Comienza con WOFF2 como la base para navegadores modernos. La W3C Recommendation describe WOFF2 como un paquete de fuentes web diseñado para mejorar la compresión y la descompresión rápida, y está implementado en los principales navegadores. Mantén otro formato solo para un requisito documentado de navegadores legados; de lo contrario, un fallback bien diseñado es la vía de compatibilidad más segura.
El subsetting crea un archivo más pequeño que contiene glifos seleccionados, o formas de caracteres. unicode-range puede asociar subconjuntos con rangos de caracteres para que el navegador elija un archivo relevante al hacer match con el texto. Construye subconjuntos a partir de páginas reales y los idiomas que soportas, incluyendo puntuación, monedas, nombres, texto legal y escrituras introducidas por usuarios. Los glifos faltantes son un problema de corrección, no un ahorro de bytes aceptable.
Prueba páginas localizadas representativas y entradas de formulario, no solo muestras de diseño en inglés.
Asegura que el unicode-range de cada subconjunto y el rango de peso/estilo coincidan con el archivo desplegado.
Diseña el fallback y la política font-display conjuntamente
Una fuente fallback es lo que ven los usuarios cuando la face personalizada no está lista. Elígela por proporciones similares y luego compara títulos reales, botones multilinea, navegación, tablas, formularios y cadenas largas localizadas. Diferentes anchos cambian los saltos de línea; diferentes ascent, descent o line-gap cambian la altura del bloque. Ambos pueden mover contenido ya visible en la página.
font-display define el comportamiento de renderizado mientras una face está no disponible. optional tiene un periodo de bloqueo extremadamente corto y sin periodo de swap, por lo que puede servir para body cuando un fallback estable es preferible en la primera visita. swap muestra el fallback rápidamente y puede aplicar luego la web font, pero úsalo solo donde un reemplazo tardío no provoque un reflow disruptivo. Block o fallback deberían responder a una razón de diseño probada, no ser un defecto global. CSS size-adjust puede ayudar a ajustar las métricas de un fallback, pero verifica visualmente cada script y viewport soportado.
No hagas que texto de pago, recuperación, cuenta, seguridad o navegación dependa de una fuente personalizada tardía.
Una letra de fallback puede transmitir el significado equivocado; los iconos SVG son generalmente más seguros para símbolos de interfaz.
Mejora el descubrimiento, pero modera preload y evalúa el flujo de datos
Una face declarada solo en una hoja de estilos externa puede descubrirse después de que esa hoja se descargue y analice. CSS crítico temprano mantenible puede exponer una declaración necesaria antes; no inlines el binario de la fuente, lo que agranda el documento. Para un origen de terceros, preconnect puede establecer la conexión antes. Las solicitudes de fuente son recursos CORS, por lo que la entrega cross-origin y los preloads requieren correcto manejo de crossorigin.
Preload es una anulación de prioridad, no un interruptor global de velocidad. Puede competir con otros trabajos críticos y descargar una face que una ruta nunca necesita; además elude la selección por unicode-range. Arregla el descubrimiento tardío primero, luego preload solo un archivo probado de primera vista usando la URL exacta, as=font y crossorigin. Google Fonts indica que las solicitudes a su API incluyen la IP del visitante, la URL solicitada, cabeceras HTTP y el referer; también dice que su API no establece ni registra cookies y no usa la información recogida para perfiles o publicidad dirigida. El self-hosting evita que Google reciba datos por esas cargas. Evalúa entrega, aviso de privacidad, jurisdicción, contratos y asesórate cuando haga falta.
Compara trazas con caché fría y confirma que el archivo preloaded se consume en la ruta.
Sopesa establecimiento de conexión, caché y capacidad de CDN, mantenimiento de activos y flujo de datos del visitante.
Versiona los activos de fuente y conserva una configuración CSS fallback probada.
Prueba el comportamiento renderizado y opera las fuentes como una dependencia de resiliencia
Con caché fría, usa las herramientas de red del navegador para inspeccionar la cadena CSS→solicitud de fuente, tiempos, origen, caché y fallos. Repite en una conexión restringida, luego estrangula o bloquea la fuente. El éxito significa texto legible, controles utilizables, símbolos correctos y layout coherente antes de que aparezca la face personalizada. Prueba diseños realistas de móvil y escritorio, cadenas largas, errores, texto de consentimiento, precios y cada script soportado.
En Chromium, graba una recarga en el panel Performance e inspecciona la pista Layout Shifts; DevTools puede identificar elementos movidos y animar el shift. La carga de fuentes es un culpable conocido, pero un elemento movido no es necesariamente la causa raíz, así que correlaciona la traza con la aplicación de la fuente. La Layout Instability API es exclusiva de Chromium, lo que hace importantes las comprobaciones visuales cross-browser. Incluye activos de fuente, comportamiento CORS, política de caché, fallbacks y reversión en la revisión de lanzamiento. El modo degradado previsto es texto legible, no contenido en blanco o navegación rota.
Una caché caliente puede ocultar la solicitud inicial y el problema de renderizado.
Repite la comprobación cuando cambien archivos, copy del CMS, plantillas, proveedores o reglas de CDN.