⚡ Cómo cargar fuentes web sin perder velocidad y acelerar la renderización de texto
Cuando un sitio tarda 3 segundos en cargar y luego pasa otro segundo redibujando todo el texto, los visitantes se van. No a la competencia, simplemente cierran la pestaña. El problema casi siempre es el mismo: fuentes web cargadas sin considerar el rendimiento.
Según los datos de HTTP Archive para 2025, alrededor del 84% de los sitios usan fuentes web personalizadas, y la mediana de sitios realiza 5 peticiones a archivos de fuentes que suman unos 400 KB. En una conexión deficiente, eso significa 2-3 segundos de bloqueo de renderizado mientras los usuarios ven una pantalla en blanco. Google también tiene en cuenta el Cumulative Layout Shift causado por el intercambio de fuentes en Core Web Vitals.
Los cuatro pasos a continuación no son teoría. Es el mínimo práctico que resuelve la gran mayoría de los problemas de rendimiento con fuentes web. Cada paso lleva de 5 a 15 minutos.
💡 Resumen rápido:
- Decida los formatos: woff2 como principal y woff como alternativa es suficiente para todos los navegadores modernos.
- Añada precarga para las fuentes críticas, de modo que el navegador empiece a descargarlas inmediatamente en lugar de esperar al CSS.
- Revise su font-face: local(), orden correcto de src, unicode-range para caracteres latinos.
- Configure font-display: swap, y los visitantes verán el texto al instante incluso mientras la fuente aún se está cargando.
Paso 1: Use woff2 y woff, no necesita nada más
Existen muchos formatos de fuentes web: EOT, TTF, OTF, SVG. Pero en 2026, realmente solo necesita dos.
woff2 es el estándar moderno. Los archivos son un 30% más pequeños que woff a la misma calidad porque usan compresión brotli en lugar de gzip. El soporte de navegadores incluye todos los navegadores evergreen, incluidos Safari móvil y Samsung Internet. A nivel global, más del 98% de los usuarios.
woff es la alternativa para una pequeña fracción de navegadores antiguos (Safari en iOS 11 e inferior, entornos corporativos poco comunes). También está comprimido y funciona en todas partes desde IE9+. Colóquelo al final en src, y el navegador tomará woff2 si puede; de lo contrario, recurrirá a woff.
No use EOT (Internet Explorer 8 e inferior) ni TTF (formato sin procesar, sin compresión) en 2026. La cuota de esos navegadores es ruido estadístico, y cada formato adicional en src aumenta el tamaño del CSS y confunde al navegador.
Si tiene archivos en TTF u OTF, conviértalos usando un generador en línea. Transfonter produce woff2 y woff en una sola operación, mostrando una vista previa de los glifos y el tamaño final del archivo. Una alternativa es Font Squirrel Webfont Generator.
Paso 2: Precargue las fuentes críticas
El navegador se entera de las fuentes a través del CSS, y lee el CSS después del HTML. Para cuando llega allí, han pasado entre 500 y 800 ms en una conexión promedio. La precarga elimina este retraso: el navegador comienza a descargar la fuente tan pronto como encuentra la etiqueta en <head>, sin esperar al CSS.
Etiqueta funcional mínima:
1 <link rel="preload" as="font" 2 href="/fonts/open-sans.woff2" 3 type="font/woff2" 4 crossorigin="anonymous">
La clave es crossorigin="anonymous". Sin esto, el navegador ignora la fuente precargada y la descarga de nuevo. La razón es que las fuentes se obtienen de forma anónima (CORS), pero la precarga sin crossorigin realiza una solicitud normal. El navegador las considera recursos diferentes y no las relaciona.
Qué precargar. No todas las fuentes del sitio. Solo la que se usa para el texto principal en la parte visible de la página (above the fold): encabezados, cuerpo, navegación. El resto puede esperar. Precargar 4-5 archivos da rendimientos decrecientes y quita ancho de banda al contenido crítico.
Nota importante sobre Google Fonts y CDN. Si usa fuentes de Google Fonts, los archivos se actualizan periódicamente, y un enlace de precarga a una versión antigua provocará una doble descarga (antigua + nueva). En lugar de precarga para fuentes de CDN, use <link rel="preconnect"> al dominio de la fuente. Esto acelera el handshake sin riesgo de desajuste de versiones:
1 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
Prefetch para fuentes secundarias. rel="prefetch" le dice al navegador: «este recurso se necesitará más tarde, cárgalo cuando el contenido principal esté listo». Adecuado para fuentes en páginas internas o fuentes de iconos en el pie de página. La prioridad es baja, no consume ancho de banda.
Hay una guía moderna sobre priorización de recursos disponible en la documentación de web.dev.
Paso 3: Escriba @font-face correctamente
A primera vista, @font-face es simple. En la práctica, tiene cuatro áreas sutiles, cada una de las cuales afecta a la velocidad.
Ejemplo de una declaración correcta:
1 @font-face { 2 font-family: 'Open Sans'; 3 font-weight: 400; 4 font-style: normal; 5 font-display: swap; 6 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, 7 U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, 8 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, 9 U+FEFF, U+FFFD; 10 src: local('Open Sans'), 11 url('/fonts/open-sans.woff2') format('woff2'), 12 url('/fonts/open-sans.woff') format('woff'); 13 }
Desglose por puntos:
local(): primero en src. Si el usuario ya tiene la fuente instalada en su sistema (Roboto en Android, Segoe UI en Windows, San Francisco en macOS), el navegador toma la copia local y descarga cero bytes. Ponga siempre local() como primera línea en src. Tome el nombre del propio archivo de la fuente: local('Open Sans') y local('Roboto Regular').
Orden de formatos. El navegador recorre src de izquierda a derecha y toma el primer formato que entienda. Por lo tanto: local() → woff2 → woff. Nada de EOT/TTF/SVG al final, a menos que tenga una audiencia específica con navegadores antiguos, y en ese caso van DESPUÉS de woff (no antes).
unicode-range: cargue solo los glifos que necesita. Para caracteres latinos, el rango U+0000-00FF (Latín básico + Suplemento Latín-1) es suficiente. Eso son unos 250 glifos frente a varios miles en el conjunto completo. El tamaño real del archivo se reduce de 3 a 5 veces. No sobrecargue el rango: cada bloque unicode adicional añade glifos que nadie verá. Para sitios en cirílico, añada U+0400-04FF.
Orden de los bloques @font-face. Si tiene varios pesos (regular, negrita, cursiva), ponga el peso regular (font-weight: 400) primero. El navegador comenzará a descargar ese.
Paso 4: Active font-display: swap y dígale adiós al FOIT
El Flash of Invisible Text (FOIT) ocurre cuando el navegador oculta el texto durante 3 segundos mientras espera la fuente. Los usuarios ven una página en blanco. El Flash of Unstyled Text (FOUT) es cuando el texto es inmediatamente visible con una fuente del sistema y luego se reemplaza por la personalizada. Lo segundo siempre es mejor que lo primero.
font-display: swap en @font-face hace exactamente esto: el texto se renderiza al instante con una fuente del sistema, y cuando la fuente personalizada se carga, se intercambia. Ideal para el texto del cuerpo.
Otros valores y cuándo usarlos:
swap: para el texto del cuerpo. El texto es visible inmediatamente, el reemplazo es suave.optional: para fuentes decorativas e iconos. El navegador decide si descarga la fuente o no. En una conexión deficiente, se negará y mantendrá la fuente del sistema. El período de espera es de 100 ms.block: bloqueo corto (generalmente 3 segundos), luego el texto es visible, la fuente se intercambiará cuando se cargue. Raramente usado.fallback: un compromiso. Bloqueo corto, luego el texto es visible, la fuente se intercambiará si se carga rápidamente.
En la práctica, use swap para el texto del cuerpo y optional para fuentes de iconos y decoración. Con eso es suficiente.
Comportamiento del navegador sin font-display. Si no especifica nada, Chrome oculta el texto hasta 3 segundos, Firefox hasta 3 segundos, Safari indefinidamente y Edge muestra la fuente del sistema inmediatamente. Con font-display: swap, este comportamiento se unifica y el resultado es predecible.
Cómo verificar el resultado
Revise su sitio antes y después en web.dev/measure. Lighthouse mostrará «Ensure text remains visible during webfont load» como una línea separada. Si la auditoría está en rojo, su font-display no está funcionando o falta.
Para verificación manual: abra DevTools → Network, configure la limitación a «Slow 3G» y actualice la página. El texto debería aparecer en una fuente del sistema al instante, no después de 3 segundos de pantalla en blanco.
Las capturas de pantalla a continuación muestran la diferencia entre el enfoque estándar y el optimizado (prueba en Slow 3G):
Comportamiento por defecto: el texto está oculto hasta que la fuente se carga
Comportamiento optimizado: el texto es visible inmediatamente en una fuente del sistema
La diferencia es visible a simple vista: la primera captura muestra una pantalla en blanco, la segunda muestra contenido disponible al instante.
En la conferencia performance.now() 2024, Mandy Michael cubre estrategias avanzadas: unicode-range incremental, segmentación de fuentes y trabajo con fuentes variables. Para quienes quieran ir más allá de los cuatro pasos básicos.
⁉️🤔 Preguntas frecuentes
¿Por qué necesito woff si woff2 es compatible en todas partes?
Los usuarios restantes de iOS Safari antiguo (iOS 11 e inferior) y entornos corporativos poco comunes con navegadores bloqueados no admiten woff2. Sin una alternativa woff, estos usuarios verán una fuente del sistema en lugar de la suya. Woff añade 15-20 KB al conjunto: un precio insignificante por cubrir la cuota restante.
¿Puedo simplemente usar Google Fonts y no preocuparme?
Sí, y para la mayoría de los sitios esta es la vía óptima. Google Fonts sirve automáticamente woff2 a los navegadores modernos, utiliza una CDN distribuida geográficamente y admite
display=swapcomo parámetro de URL. Inconvenientes: dependencia de una CDN externa (consideraciones de privacidad, RGPD), incapacidad para controlarunicode-rangey la instalación de fuentes locales. Si la privacidad y el control son importantes, aloje las fuentes usted mismo.
¿Cómo sé si las fuentes realmente están ralentizando mi sitio?
Lighthouse (la pestaña Auditorías en Chrome DevTools) mostrará la auditoría «Ensure text remains visible during webfont load». WebPageTest proporciona una cascada con los tiempos de cada solicitud de fuente. Si las fuentes comienzan después del primer CSS, la precarga no está configurada. Si el cambio de diseño es superior a 0.1, la fuente está causando Cumulative Layout Shift, y Google lo cuenta en Core Web Vitals.
font-display: swap arruina el diseño, ¿el texto «salta» al intercambiarse?
Sí, esta es una desventaja conocida de swap. Combátala con dos técnicas. Primero: configure
font-sizeyline-heightpara el texto de modo que coincidan con la fuente alternativa del sistema. La diferencia en las métricas será mínima. Segundo: use Font Style Matcher o la propiedadsize-adjusten@font-face(disponible en navegadores modernos) para igualar las métricas de la fuente personalizada a la del sistema. Después del ajuste, el CLS será cero.
¿Debería precargar todas las fuentes del sitio?
No. Precargue solo las fuentes críticas: aquellas que forman el texto en la parte visible (las primeras 1-2 pantallas). Cargue el resto normalmente a través de CSS. Precargar más de 5 fuentes satura el ancho de banda y retrasa recursos más importantes en la cola. En la práctica, 1-2 enlaces de precarga cubren la gran mayoría de los escenarios.
¿Vale la pena el esfuerzo? Cuatro pasos, cuatro minutos
Configurar fuentes web no es un proyecto de una semana. Convertir a woff2, corregir @font-face, la precarga y font-display: swap lleva entre 20 y 30 minutos de trabajo, incluso si nunca lo ha hecho antes.
El beneficio es medible: el texto se vuelve visible entre 1.5 y 2.5 segundos antes en Slow 3G. Core Web Vitals no penaliza por el cambio de diseño. Y los usuarios no se van mientras miran una pantalla en blanco.
Comience con una fuente: la fuente principal del texto del cuerpo. Siga los cuatro pasos. Verifique Lighthouse antes y después. La diferencia en números será más convincente que cualquier argumento.
Un equipo profesional de escritores y editores especializados en la creación de contenido de calidad.