Optimizador del tamaño de entrega de fuentes web

• Análisis instantáneo de la entrega de fuentes web: Analiza declaraciones CSS @font-face al instante en tu navegador, sin subir nada a un servidor y sin procesamiento en la nube. Nuestro optimizador detecta en tiempo real la falta de WOFF2, formatos heredados y problemas de font-display.
• Optimizador de entrega de fuentes web online y seguro: Tu código CSS nunca sale de tu dispositivo al analizarlo. El procesamiento 100% en el lado del cliente garantiza privacidad total: sin almacenamiento en la nube, sin registros de servidor y sin exposición de las URL de fuentes.
• Optimizador de entrega de fuentes web sin instalación: Analiza y optimiza declaraciones @font-face directamente en tu navegador, sin descargar software, sin plugins y sin cuenta. Funciona en cualquier navegador moderno y sistema operativo.
• Salida CSS optimizada con un clic: El optimizador genera un bloque CSS @font-face depurado: formatos EOT y SVG eliminados, font-display añadido y respaldos local() incluidos, listo para copiar o descargar como archivo .css.

• Optimización de fuentes para Core Web Vitals: Analiza las declaraciones @font-face para corregir problemas de LCP y CLS relacionados con fuentes. La falta de font-display: swap provoca texto invisible (FOIT) que retrasa el LCP; el optimizador lo detecta y lo corrige automáticamente.
• Modernización de pilas de fuentes heredadas: Moderniza pilas @font-face antiguas que incluyen formatos EOT, SVG y TTF. El optimizador elimina los formatos obsoletos, asegura que WOFF2 sea el primero de la lista src y genera un CSS moderno y limpio.
• Auditoría de fuentes de un sistema de diseño: Audita las declaraciones @font-face de tu sistema de diseño o librería de componentes. El optimizador identifica WOFF2 ausente, valores inconsistentes de font-display y oportunidades de pasar a fuentes variables.
• Autoalojamiento de fuentes compatible con el RGPD: Detecta URL del CDN de Google Fonts en las declaraciones @font-face que puedan infringir el RGPD al enviar direcciones IP de usuarios a Google. El optimizador las señala y recomienda alternativas autoalojadas.
• Entrega de fuentes multilingüe: Analiza declaraciones unicode-range para pilas de fuentes multilingües. El optimizador detecta la falta de propiedades unicode-range que hace que se descarguen todos los subconjuntos de fuente incluso en páginas de un solo idioma.
• Planificación de migración a fuentes variables: Identifica familias tipográficas con 4 o más declaraciones de peso que se beneficiarían de una fuente variable. El optimizador las señala y recomienda el enfoque de fuente variable para reducir peticiones HTTP.

La optimización de la entrega de fuentes web es el proceso de configurar las declaraciones CSS @font-face para minimizar el tamaño de descarga de las fuentes, reducir las peticiones HTTP y evitar el bloqueo del renderizado. Los factores clave son: la selección de formato (WOFF2 es entre un 30 y un 50% más pequeño que WOFF), font-display (evita texto invisible durante la carga), unicode-range (permite el subsetting por alfabeto) y el respaldo local() (usa fuentes del sistema cuando están disponibles). Nuestro optimizador del tamaño de entrega de fuentes web analiza tu CSS @font-face, detecta todos estos problemas y genera un CSS optimizado.

1. 1 Pega tu CSS @font-face: Pega cualquier CSS con declaraciones @font-face, ya provenga de tu hoja de estilos, de un embed de Google Fonts o de un proveedor de fuentes. Todo el análisis ocurre localmente en tu navegador: tu CSS y las URL de fuentes nunca salen de tu dispositivo.
2. 2 Haz clic en «Analizar entrega de fuentes»: El optimizador analiza cada bloque @font-face y extrae font-family, font-weight, font-style, font-display, unicode-range y todas las entradas src. Detecta WOFF2 ausente, formatos heredados (EOT, SVG), falta de font-display y problemas de RGPD.
3. 3 Revisa las recomendaciones y descarga el CSS optimizado: Los resultados muestran etiquetas de formato por declaración, recomendaciones de optimización con correcciones y un CSS depurado (EOT/SVG eliminados, font-display añadido, respaldos local() añadidos) listo para copiar o descargar.

• Formato WOFF2: WOFF2 usa compresión Brotli y es entre un 30 y un 50% más pequeño que WOFF. Es compatible con todos los navegadores modernos (Chrome 36+, Firefox 39+, Safari 10+, Edge 14+). Usa siempre WOFF2 como primera entrada src.
• Propiedad font-display: Controla cómo gestiona el navegador la carga de fuentes. swap muestra el texto de reserva de inmediato (lo mejor para el cuerpo de texto); optional solo usa la fuente si carga en 100 ms (lo mejor para fuentes no críticas).
• Formatos heredados (EOT, SVG): EOT solo es necesario para IE8 y anteriores (menos del 0,1% de cuota). Las fuentes SVG están obsoletas. Eliminarlos reduce la complejidad del CSS y evita peticiones HTTP innecesarias en navegadores antiguos.
• unicode-range: Permite el subsetting de fuentes por alfabeto: el navegador solo descarga el archivo de fuente de los alfabetos realmente usados en la página. Es crucial para sitios multilingües con familias CJK grandes o de varios alfabetos.

El optimizador del tamaño de entrega de fuentes web analiza solo declaraciones CSS: no descarga ni mide el tamaño real de los archivos de fuente. Los tamaños estimados se basan en valores típicos de cada formato (WOFF2 ~18 KB, WOFF ~28 KB, TTF ~45 KB para un subconjunto latino). Los tamaños reales dependen del número de glifos, de las características OpenType y del subsetting. El optimizador no puede detectar si los archivos WOFF2 están realmente disponibles en las URL indicadas: verifica las URL en la pestaña Red de tu navegador.