Comprobador de estrategia de carga de fuentes

• Análisis instantáneo de carga de fuentes: analice las estrategias de visualización de fuentes en tiempo real: intercambio, reserva, opcional y bloqueo. Nuestro verificador de estrategias de carga de fuentes compara los cuatro valores de visualización de fuentes CSS con el tamaño del archivo de su fuente y el tiempo de carga estimado, mostrando el tiempo exacto de visualización del texto y el impacto de CLS para cada estrategia al instante.
• Análisis privado: sin carga del servidor: todo el análisis de la estrategia de carga de fuentes se ejecuta completamente en su navegador. Los nombres, tamaños y configuraciones de sus fuentes nunca salen de su dispositivo. El verificador de estrategias de carga de fuentes utiliza un modelo matemático para estimar el impacto de CLS y renderizar el tiempo con total privacidad.
• Optimización de Core Web Vitals: la estrategia de carga de fuentes impacta directamente en Largest Contentful Paint (LCP) y Cumulative Layout Shift (CLS). Nuestro verificador de estrategias de carga de fuentes lo ayuda a elegir el valor óptimo de visualización de fuentes (reserva para el texto del cuerpo, intercambio para encabezados u opcional para fuentes decorativas) para maximizar su puntaje Lighthouse.
• Línea de tiempo visual y estimación de CLS: vea una línea de tiempo visual codificada por colores de cada estrategia de visualización de fuentes que muestra exactamente cuándo se vuelve visible el texto, cuándo se carga la fuente y cuándo se produce cualquier intercambio. El verificador de estrategias de carga de fuentes proporciona una estimación clara de la contribución de CLS (ninguna/baja/moderada/alta) con una explicación del motivo.

• Optimización del rendimiento de Next.js y React: los desarrolladores de React y Next.js utilizan el verificador de estrategias de carga de fuentes para optimizar las declaraciones @font-face para la representación del lado del servidor (SSR). Elija el valor de visualización de fuente correcto para evitar cambios en el diseño durante la hidratación y, al mismo tiempo, garantizar que las fuentes personalizadas se representen correctamente. El CSS generado funciona con next/font, componentes con estilo y módulos CSS.
• Cumplimiento de Core Web Vitals: los ingenieros de rendimiento web utilizan el verificador de estrategias de carga de fuentes para reducir CLS (Cumulative Layout Shift) de los intercambios de fuentes. Al analizar la compensación entre visualización de fuente: intercambio (texto rápido pero CLS) y visualización de fuente: opcional (sin CLS pero sin fuente personalizada en conexiones lentas), los equipos pueden alcanzar sus objetivos de Lighthouse CLS sin sacrificar la tipografía.
• Optimización de conexiones móviles y lentas: en conexiones 3G con RTT de 300 a 500 ms, los archivos de fuentes de más de 50 KB pueden tardar entre 3 y 5 segundos en cargarse. El verificador de estrategia de carga de fuentes ayuda a los desarrolladores móviles a decidir entre visualización de fuente: respaldo (texto visible a 100 ms con posible intercambio) y visualización de fuente: opcional (sin intercambio, CLS inferior) para diferentes tamaños de pantalla y tipos de conexión.
• Desarrollo de temas de WordPress y CMS: los desarrolladores de temas utilizan el verificador de estrategias de carga de fuentes para generar CSS @font-face óptimo para WordPress, Shopify y otras plataformas CMS. La herramienta produce CSS listo para usar que se puede pegar directamente en style.css o en la configuración de carga de fuentes de un tema personalizado, lo que garantiza una representación de fuentes consistente en todas las páginas.
• Fuentes del sistema de diseño y biblioteca de componentes: los mantenedores del sistema de diseño utilizan el verificador de estrategias de carga de fuentes para establecer estrategias estándar de visualización de fuentes para diferentes tipos de componentes: opcional para fuentes de íconos y elementos decorativos, alternativa para componentes de texto del cuerpo e intercambio para tipografía crítica de marca. El CSS generado incluye soporte de rango Unicode para una carga eficiente de subconjuntos.
• Mejora de la puntuación de Lighthouse y PageSpeed ​​Insights: los especialistas en marketing digital y SEO utilizan el verificador de estrategias de carga de fuentes para diagnosticar y solucionar problemas de rendimiento relacionados con las fuentes señalados por las auditorías de Lighthouse. La herramienta explica por qué font-display: block provoca advertencias "Asegúrese de que el texto permanezca visible durante la carga de la fuente web" y proporciona la solución CSS exacta para eliminar esta falla común de Lighthouse.

El descriptor de visualización de fuentes CSS, definido en la especificación de nivel 4 del módulo de fuentes CSS, controla cómo se representa una fuente web mientras se carga. Determina el período de bloqueo (cuánto tiempo el navegador oculta el texto mientras espera la fuente), el período de intercambio (cuánto tiempo el navegador muestra una fuente alternativa antes de intercambiar) y el período de falla (qué sucede si la fuente nunca se carga). Elegir el valor de visualización de fuente incorrecto afecta directamente el cambio de diseño acumulativo (CLS) y la pintura con contenido más grande (LCP), dos de las métricas de Core Web Vitals de Google. Nuestro verificador de estrategias de carga de fuentes lo ayuda a elegir el valor óptimo para cada fuente en su página.

1. Ingrese los detalles de su fuente: proporcione el nombre de la familia de fuentes, el tamaño de archivo estimado (KB) y el tiempo de carga estimado (ms). Elija entre ajustes preestablecidos rápidos para escenarios comunes como cuerpo de texto (30 KB), encabezados (50 KB) o fuentes CJK grandes (500 KB). El verificador de estrategias de carga de fuentes utiliza estas entradas para modelar un comportamiento de carga realista.
2. Comparar todas las estrategias en paralelo: la herramienta analiza los cinco valores de visualización de fuentes CSS (automático, bloque, intercambio, respaldo y opcional) y presenta una cuadrícula de comparación que muestra métricas de tiempo, calificaciones CLS y líneas de tiempo visuales para cada uno. Se resalta una estrategia recomendada según el tamaño de fuente y el perfil de carga.
3. Revise y copie el CSS recomendado: haga clic en cualquier tarjeta de estrategia para obtener una vista detallada con una línea de tiempo interactiva de las fases de bloqueo, respaldo e intercambio. El CSS @font-face generado con el valor de visualización de fuente elegido está listo para copiar y pegar en sus hojas de estilo.

• Bloquear: El navegador oculta el texto por hasta 3 segundos mientras se carga la fuente (FOIT - Flash of Invisible Text). Si la fuente se carga en 3 segundos, el texto aparece en el tipo de letra correcto sin cambios de diseño. Si la fuente no se carga, el texto aparece en una fuente alternativa. Lo mejor para títulos de héroes donde la consistencia visual importa más que la renderización rápida.
• Intercambiar: el texto se representa inmediatamente en una fuente alternativa, luego cambia a la fuente personalizada cuando se carga (FOUT - Flash of Unstyled Text). Esto proporciona el mejor tiempo para la primera pintura, pero provoca un cambio de diseño cuando se intercambian las fuentes. Lo mejor para textos críticos para la marca donde es esencial mostrar el tipo de letra correcto.
• Respaldo: un compromiso: un período de bloqueo corto (~100 ms) permite que las fuentes almacenadas en caché se carguen sin necesidad de intercambiar flash, luego vuelve a la fuente del sistema. La fuente solo cambia si se carga en ~3 segundos. Lo mejor para el cuerpo del texto donde desea una representación rápida con tipografía personalizada ocasional.
• Opcional: un período de bloque muy corto (~100 ms), luego la fuente se considera opcional. Si se carga a tiempo (por ejemplo, desde la memoria caché), se procesa; de lo contrario, el retroceso persiste. La fuente nunca cambia en conexiones lentas. Lo mejor para fuentes decorativas y no críticas.
• Auto: El navegador elige la estrategia. En la mayoría de los navegadores modernos, esto tiene por defecto un comportamiento similar a "bloquear". Evite el modo automático cuando necesite un comportamiento de representación de fuentes predecible.

Cuando se produce un intercambio de fuente, el diseño puede cambiar porque las métricas de la fuente personalizada (altura de mayúscula, altura x, proporciones ascendente/descendente, anchos de avance y cuadros delimitadores de glifos) difieren de la fuente alternativa. La contribución de CLS de un intercambio de fuentes depende de: la diferencia de métricas entre la fuente personalizada y alternativa (normalmente más grande para las fuentes de visualización/títulos y más pequeña para las fuentes del cuerpo), la longitud del texto afectada (los títulos cambian más que las palabras individuales) y la cantidad de elementos que utilizan la fuente. Precargar la fuente con , usar font-display: opcional o size-adjust y ascent-override en la declaración @font-face puede mitigar estos cambios. Nuestro verificador de estrategias de carga de fuentes estima la contribución de CLS para cada estrategia en función del tamaño de su fuente y las características de carga.