¡Muy buenas querido lector! Ya estoy una semana más por aquí y, en esta ocasión, te enseño cómo optimizar las fuentes o tipografías de tu WordPress.
Las tipografías suelen ser uno de los recursos que más retrasan la carga de una página web, sobre todo cuando se cargan desde servidores externos o se utilizan demasiadas variantes.
En este post te explico por qué conviene optimizarlas, cómo alojarlas en tu propio servidor, cómo configurar su visualización y qué errores evitar. ¡Al lío!
Resumen rápido
- Utiliza pocas tipografías y pocos grosores, en formato WOFF2 y solo con los caracteres que necesitas.
- Aloja las fuentes en tu propio servidor en lugar de cargarlas desde los servidores de Google.
- Configura
font-display: swappara que el texto se vea desde el principio. - Precarga solo las fuentes críticas, las que aparecen en el primer pantallazo.
¿Por qué conviene optimizar las fuentes de tu WordPress?
- Son archivos pesados y cada variante (grosor, cursiva) es un archivo más.
- Bloquean la aparición del texto: si no se configuran bien, el usuario ve un espacio en blanco mientras cargan.
- Afectan a las Core Web Vitals: al LCP si el texto principal depende de ellas y al CLS si el contenido salta al cambiar la tipografía.
- Generan peticiones externas si se cargan desde otro dominio, lo que añade tiempo de conexión.
¿Y las Google Fonts?
Las Google Fonts son las tipografías más utilizadas en WordPress, y cargarlas directamente desde los servidores de Google obliga al navegador a conectarse a otro dominio antes de descargarlas.
Además, hay un motivo de privacidad: al cargarlas desde los servidores de Google se envía la IP del usuario, algo que en Europa ha generado dudas legales. Por eso, hoy lo recomendable es alojarlas en tu propio servidor.
Diseño tu página web en WordPress rápida y optimizada para SEO. Tu web pensada para convertir visitas en clientes
- Diseño web 100% personalizado. Nada de IA. 100% artesanal.
- Web rápida y lista para posicionar en Google.
- Diseño tu web en menos de 21 días. Firmado por contrato.
- Comunicación directa conmigo. Sin intermediarios.
Cómo optimizar las fuentes de WordPress paso a paso
1. Utiliza el menor número de tipografías posible
Con una o dos tipografías es suficiente en la mayoría de páginas web. Y dentro de cada una, carga solo los grosores que realmente utilizas: cada peso adicional es otro archivo que descargar.
Revisa también si tu theme o tu maquetador cargan fuentes que no utilizas, algo muy habitual.
2. Utiliza el formato WOFF2
WOFF2 es el formato más ligero y compatible con los navegadores actuales. Si tus fuentes están en TTF, OTF, EOT o WOFF antiguo, conviértelas: el ahorro de peso es considerable.
3. Carga solo los caracteres que necesitas
Muchas tipografías incluyen alfabetos completos (cirílico, griego, vietnamita) que no vas a utilizar. Al descargarlas o generarlas, limita el subconjunto al alfabeto latino que necesites.
4. Aloja las fuentes en tu servidor
Alojar las fuentes localmente evita la conexión a un dominio externo y te da control sobre su caché. Tienes varias formas de hacerlo:
Con un plugin de rendimiento
Plugins como Perfmatters permiten alojar localmente las Google Fonts desde su sección de fuentes, sin tocar código.
Con un plugin específico de fuentes
Existen plugins dedicados a descargar y servir las Google Fonts desde tu servidor, como OMGF o Self Hosted Fonts. Antes de instalarlos, comprueba que estén actualizados y sean compatibles con tu versión de WordPress.
Con tu maquetador
Los maquetadores permiten subir tipografías propias. En Elementor, por ejemplo, desde Elementor > Tipografías personalizadas.
Con CSS
Si prefieres hacerlo a mano, sube los archivos por FTP y declara la fuente en tu CSS:
@font-face { font-family: 'MiFuente'; src: url('/fuentes/mifuente.woff2') format('woff2'); font-weight: 400; font-display: swap; }5. Configura font-display
La propiedad font-display indica al navegador qué hacer mientras la fuente se descarga:
| Valor | Qué hace |
|---|---|
swap | Muestra una fuente del sistema y la sustituye al cargar la tuya. Es el valor recomendado. |
optional | Utiliza la fuente solo si carga muy rápido. Útil si el cambio de tipografía genera saltos visuales. |
block | Oculta el texto hasta que carga la fuente. No recomendado. |
fallback | Opción intermedia entre swap y optional. |
Puedes configurarlo desde plugins como Perfmatters o directamente en tu CSS. Para evitar saltos al cambiar de tipografía, elige una fuente de reserva con proporciones parecidas.
6. Precarga solo las fuentes críticas
La precarga indica al navegador que descargue un recurso cuanto antes. Utilízala solo con las fuentes que aparecen en el primer pantallazo, porque precargarlo todo resta prioridad al resto:
<link rel="preload" href="/fuentes/mifuente.woff2" as="font" type="font/woff2" crossorigin>
7. Si cargas fuentes externas, preconecta el dominio correcto
Si por algún motivo mantienes las Google Fonts en los servidores de Google, adelanta la conexión con estas etiquetas:
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>PD. Los archivos de fuentes se sirven desde fonts.gstatic.com, no desde fonts.google.com. Es un error muy habitual que hace que la preconexión no sirva de nada.
8. Cachea y comprime
Las fuentes se cachean muy bien, porque no cambian. Un plugin de caché como WP Rocket o la caché de tu hosting se encarga de ello. Te explico más en los tipos de caché web.
Si tu público está en varios países, servirlas desde una CDN reduce la latencia.
9. Valora utilizar fuentes del sistema
La opción más rápida es no cargar ninguna fuente externa y utilizar las del sistema del usuario. Pierdes personalidad de marca, pero ganas velocidad. Es una opción interesante en proyectos donde prima el rendimiento.
Cómo comprobar si tus fuentes están bien optimizadas
- Revisa en PageSpeed Insights los avisos sobre fuentes y texto invisible durante la carga.
- Analiza la cascada en GTmetrix o en las herramientas de desarrollador para ver cuántos archivos de fuentes se cargan, desde dónde y cuánto pesan.
- Comprueba si hay peticiones a fonts.gstatic.com: si las hay, tus fuentes no están alojadas localmente.
- Mide el CLS para detectar saltos al cambiar la tipografía.
Diseño tu página web en WordPress rápida y optimizada para SEO. Tu web pensada para convertir visitas en clientes
- Diseño web 100% personalizado. Nada de IA. 100% artesanal.
- Web rápida y lista para posicionar en Google.
- Diseño tu web en menos de 21 días. Firmado por contrato.
- Comunicación directa conmigo. Sin intermediarios.
Conclusiones sobre la optimización de fuentes en WordPress
Optimizar las tipografías es una de las mejoras de WPO con mejor relación entre esfuerzo y resultado: en poco tiempo reduces peticiones, peso y saltos visuales.
Mi recomendación: utiliza una o dos tipografías, aloja las fuentes en tu servidor en formato WOFF2, configura font-display swap y precarga solo las críticas. Con eso cubres casi todo.
Si quieres una página web WordPress rápida y bien optimizada desde el principio, puedo ayudarte con mi servicio de diseño web WordPress. Y si necesitas mejorar el rendimiento de la que ya tienes, te ayudo con mi servicio de mantenimiento web WordPress.
Ahora te toca a ti, querido lector. ¿Tienes optimizadas las tipografías de tu página web? ¡Te leo en los comentarios!
Preguntas frecuentes sobre las fuentes en WordPress
¿Cómo optimizar las fuentes de WordPress?
Utiliza pocas tipografías y grosores, en formato WOFF2 y con los caracteres que necesitas, alójalas en tu propio servidor, configura font-display swap, precarga solo las fuentes críticas y aprovecha la caché.
¿Es mejor alojar las Google Fonts localmente?
Sí. Evita la conexión a un dominio externo, te da control sobre la caché y evita que se envíe la IP del usuario a los servidores de Google, algo que en Europa ha generado dudas legales.
¿Qué es font-display swap?
Es un valor de la propiedad font-display que muestra una fuente del sistema mientras se descarga la tuya, para que el usuario pueda leer el texto desde el principio. Es el valor recomendado en la mayoría de casos.
¿Qué formato de fuente es mejor para la web?
WOFF2, porque es el más ligero y está soportado por todos los navegadores actuales. Formatos como TTF, OTF o EOT pesan bastante más.
¿Cuántas tipografías debe tener una página web?
Lo recomendable es una o dos, cargando solo los grosores que se utilizan realmente. Cada tipografía y cada variante añade archivos que el navegador debe descargar.
¿Qué dominio hay que preconectar para las Google Fonts?
Las hojas de estilo se cargan desde fonts.googleapis.com y los archivos de fuente desde fonts.gstatic.com, que es el que conviene preconectar con el atributo crossorigin.
¿Precargar todas las fuentes mejora la velocidad?
No. Conviene precargar únicamente las fuentes que aparecen en el primer pantallazo, porque precargar demasiados recursos resta prioridad al resto y puede empeorar la carga.
