Guía · WordPress
Fuentes web en WordPress sin frenar la carga
Cómo cargar fuentes tipográficas en WordPress de forma rápida: pocas variantes, alojamiento propio, font-display, precarga y alternativas del sistema.
Las fuentes web retrasan el texto visible si se cargan mal. En WordPress la receta es simple: usar pocas familias y pesos, servirlas desde tu propio dominio cuando sea posible, indicar cómo se muestra el texto mientras llegan y precargar solo las críticas.
Reglas
Reglas básicas
- Limita a una o dos familias y a los pesos que realmente uses.
- Usa el formato WOFF2, ampliamente compatible.
- Incluye solo los subconjuntos de caracteres necesarios para tu idioma.
- Considera una fuente del sistema para el texto largo y una tipografía de marca solo para títulos.
CSS
Mostrar texto mientras carga la fuente
La propiedad font-display controla qué ve el visitante mientras llega la fuente. Con el valor swap se muestra primero una fuente de reemplazo y después se cambia, lo que evita texto invisible. Un ejemplo:
@font-face {
font-family: 'MiFuente';
src: url('/fuentes/mifuente.woff2') format('woff2');
font-display: swap;
}El reemplazo puede causar un pequeño salto; elige una alternativa con proporciones parecidas.
Alojamiento
Propio o de un tercero
| Opción | Ventaja | A considerar |
|---|---|---|
| Fuente alojada en tu dominio | Menos conexiones externas y más control | Debes mantener los archivos |
| Fuente desde un servicio externo | Fácil de usar | Añade una conexión extra y datos que compartes con un tercero |
| Fuente del sistema | Cero descarga | Menos identidad visual |
Si tu público es de la Unión Europea u otras jurisdicciones con normas de privacidad estrictas, revisa con asesoría legal si cargar fuentes de terceros implica compartir direcciones IP.
Precarga
Precarga con medida
Precarga solo la fuente del texto principal visible en la primera pantalla; precargar muchas compite con la imagen principal y empeora el LCP. Muchos temas y constructores permiten alojar las fuentes en local desde su configuración; confirma en su documentación. Si cambian el aspecto del texto al cargar, revisa también los saltos de diseño.
Si tu identidad visual exige una tipografía concreta, aplícala solo en los títulos y deja el texto largo con una fuente del sistema. Esa combinación mantiene la marca y evita descargar muchos pesos. Revisa también que el tema no cargue variantes que no usas, algo común en temas multipropósito: abre la pestaña Red, filtra por fuentes y comprueba qué archivos llegan en la portada. Cada archivo extra es una petición más que compite con el contenido principal.
Lista de comprobación final:
- Lista las familias y pesos que realmente usas.
- Convierte a WOFF2 y aloja en tu dominio si es viable.
- Define font-display y comprueba el comportamiento en una red lenta.
Resumen
En resumen
- Reglas básicas: Limita a una o dos familias y a los pesos que realmente uses.; Usa el formato WOFF2, ampliamente compatible.
- Mostrar texto mientras carga la fuente: La propiedad font-display controla qué ve el visitante mientras llega la fuente.
- Propio o de un tercero: Si tu público es de la Unión Europea u otras jurisdicciones con normas de privacidad estrictas, revisa con asesoría legal si cargar fuentes de terceros implica compartir direcciones IP.
- Precarga con medida: Precarga solo la fuente del texto principal visible en la primera pantalla; precargar muchas compite con la imagen principal y empeora el LCP .
Preguntas frecuentes
Lo que suelen preguntar sobre fuentes web en WordPress
¿Cuántas fuentes puedo usar?
No hay límite fijo, pero cada variante añade peso. Cuantas menos, mejor.
¿Las fuentes de iconos también cuentan?
Sí. Si solo usas unos pocos iconos, suele ser más ligero usar SVG en línea.
¿Puedo precargar todas las variantes?
No conviene: precarga solo lo imprescindible para el primer texto visible y deja el resto cargar normalmente.