Índice
Anuncio
Elegir fuentes sin frenar WordPress
La fuente más rápida es la que no se descarga: si el diseño admite Arial, Georgia, system-ui o una alternativa instalada en el dispositivo, no hay petición adicional ni espera de red.
La matriz evita decisiones automáticas
No existe una respuesta única entre Google Fonts y archivos locales: el alojamiento local da más control, pero solo compensa cuando se reducen archivos y se configura bien la caché.
| Opción | Archivos habituales | Privacidad y control | Uso recomendable |
|---|---|---|---|
| Fuentes del sistema | 0 | Máximo control, sin terceros | Checkout, intranet y web funcional |
| Google Fonts remoto | Entre 1 y 4 | Dependencia de Google | Pruebas rápidas y sitios no sensibles |
| Google Fonts local | Entre 1 y 4 si se recorta | Control total del servidor | Web corporativa española con identidad visual |
| Fuente variable local | 1 o 2 | Control alto, requiere pruebas | Diseños con varios grosores reales |
Diseñar por plantilla, no por tema
Una tienda de Madrid que vende a toda España no necesita cargar la tipografía editorial de su blog en el carrito: el visitante llega a pagar, no a leer un reportaje largo.
Por qué cambian LCP y CLS
Las fuentes pueden retrasar el texto principal y provocar cambios de tamaño cuando llega la tipografía final, empeorando LCP y CLS.
Font-display no arregla todo
font-display: swap muestra una fallback enseguida y cambia después a la fuente web, evitando texto invisible, pero no elimina el salto visual si ambas fuentes ocupan un ancho o una altura distintos.
Pesos que nadie pidió
Muchos temas solicitan 400, 500, 600 y 700 aunque el CSS solo use 400 y 700; para una web en castellano, descargar alfabetos que no se emplean también suele ser un desperdicio.
Preload con prioridad limitada
preload puede ayudar con el WOFF2 del título visible, pero precargar seis archivos hace que compitan con el CSS crítico, la imagen LCP y el JavaScript necesario.
Anuncio
Auditar antes de tocar código
Mide primero para saber si la mejora llega por las fuentes, la caché, el CDN o una variación temporal de la red.
Revisa cinco páginas distintas
Audita la home, una entrada, una ficha de producto, el carrito y el checkout: una hoja global de Elementor o un plugin puede cargar fuentes donde no son necesarias.
Guarda una prueba comparable
Antes y después, conserva el waterfall, el número de solicitudes, los KB de fuentes, LCP, FCP y CLS, además de capturas de titulares, botones, precios y formularios en móvil y escritorio.
Un colorímetro calibrador ayuda a comprobar que los cambios de fuente, peso y contraste se ven igual en una pantalla de trabajo bien ajustada. Es útil si validas diseño antes de publicar cambios en WordPress.
- Permite revisar si una fallback parece más gruesa o clara que la fuente final
- Ayuda a validar contraste de texto y botones tras cambiar tipografías
- Reduce diferencias visuales entre el monitor de edición y otros dispositivos
Convierte la auditoría en una prueba repetible: abre Chrome DevTools en una ventana de incógnito, activa «Disable cache» mientras DevTools esté abierto y aplica la misma limitación de red en todas las mediciones. En Network, filtra por Font y ordena el waterfall para identificar qué archivo bloquea o compite con la imagen LCP; el panel Initiator revela si lo carga el tema, Elementor, una hoja de Google Fonts o un plugin. Usa Coverage para localizar reglas CSS no usadas que declaran familias o pesos innecesarios, y repite la prueba en cada plantilla.
Finalmente, compara la prueba de laboratorio de PageSpeed Insights con datos de campo de Core Web Vitals cuando existan: una mejora puntual de LCP no confirma por sí sola una mejora estable para usuarios reales.
Servir WOFF2 local con criterio
El alojamiento local funciona cuando reduces la familia antes de subirla, conservas solo los archivos usados y evitas que el tema siga llamando a fonts.googleapis.com.
Crea un subconjunto para español
Un subconjunto contiene solo los caracteres necesarios; para español deben probarse tildes, eñe, signos de apertura, comillas, euro y caracteres de los idiomas reales de la web.
CSS
/ Archivo local reducido para texto latino habitual / @font-face { font-family: 'Marca Sans'; src: url('/wp-content/uploads/fonts/marca-sans-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+20AC; }
Encola una hoja local limpia
Guarda el CSS de fuentes en un tema hijo o plugin propio, y comprueba en DevTools que el constructor visual o los plugins no siguen insertando peticiones externas.
PHP <?php / Carga el CSS local después del CSS principal del tema. / add_action('wp_enqueue_scripts', function () { wp_enqueue_style( 'fuentes-locales', get_stylesheet_directory_uri() . '/assets/css/fuentes.css', array(), '1.0.0' ); }, 20);
Para crear un subconjunto real, parte siempre del archivo original y de un inventario de los idiomas, símbolos y contenidos que publica la web. Herramientas como FontTools permiten generar WOFF2 reducidos con pyftsubset, indicando los caracteres o rangos Unicode necesarios; después conviene probar títulos, precios, formularios, reseñas y contenido importado, no solo una frase de ejemplo. Conserva aparte los caracteres de puntuación tipográfica, como comillas curvas y apóstrofes, además de euro, tildes, eñe y signos de apertura.
Si el sitio publica en catalán, euskera, gallego u otros idiomas, amplía el conjunto antes de eliminar glifos. Revisa también la licencia de la fuente: alojarla localmente no elimina sus condiciones de uso ni distribución.
Evitar CLS sin ocultar el texto
font-display: swap evita una página vacía de texto, pero para reducir CLS la fallback debe reservar un espacio parecido al de la fuente final.
Declara una fallback ajustada
Las propiedades size-adjust, ascent-override, descent-override y line-gap-override ajustan cómo se dibuja la fallback mientras llega la fuente web, y deben validarse con contenido real.
CSS
/ Fallback con medidas aproximadas a la fuente final / @font-face { font-family: 'Marca Fallback'; src: local('Arial'); size-adjust: 92%; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; }
body { font-family: 'Marca Sans', 'Marca Fallback', Arial, sans-serif; }
Aplica un presupuesto visible
Cada plantilla necesita límites explícitos: la portada puede usar más diseño, pero el checkout debe reservar la red para pago, validación y contenido esencial.
Anuncio
Preguntas frecuentes
¿Cómo optimizar las fuentes en WordPress?
Audita los archivos cargados, conserva solo pesos usados y sirve WOFF2 desde el origen adecuado. Después ajusta la fallback y compara LCP, FCP y CLS antes y después en las plantillas principales.
¿Cómo cargo Google fonts localmente en WordPress?
Descarga solo pesos, estilos y caracteres necesarios, y decláralos con @font-face en CSS local. Comprueba con DevTools que no queden peticiones a Google Fonts desde el tema, el constructor o plugins.
¿Qué hace font-display swap?
font-display: swap muestra texto con una fallback mientras llega la fuente web final. Evita FOIT, pero puede causar CLS si las dos fuentes tienen tamaños o alturas de línea distintos.
¿Debo precargar todas mis fuentes WOFF2?
No, precarga solo la variante visible en la primera pantalla, normalmente entre 1 y 2 archivos. Precargar cursivas, iconos o pesos secundarios puede retrasar la imagen LCP y el CSS crítico.
La fuente correcta pesa menos
La mejora útil consiste en saber qué fuente aparece en cada plantilla, cuánto ocupa y qué recurso está desplazando en la red.
- Una fuente local solo mejora la velocidad si usas WOFF2, subconjuntos y pesos realmente necesarios.
- Limita cada plantilla a un presupuesto de archivos y KB, especialmente en carrito y checkout.
- Usa `font-display` junto con métricas CSS de fallback para reducir saltos de diseño.
- Valida peticiones, CSS sin uso y Core Web Vitals con DevTools y PageSpeed Insights.
Fuentes de interés
Otros artículos que pueden complementar lo que acabas de leer:
- ¿Cómo optimizar fuentes en WordPress? — webempresa.com
- Optimizar la Tipografía para WordPress — webperformanceoptimization.es
- Optimizar carga de Google Fonts en WordPress sin líos — reparawordpress.com
- Optimizar las fuentes en WordPress - Precise Future — precisefuture.com
- Actualizar Elementor sin medir puede empeorar tu rendimiento
- AVIF no eleva las conversiones solo por pesar menos que WebP
Josu Barrios
Somos especialistas en mantenimiento WordPress para empresas, profesionales y tiendas online. Contamos con experiencia en seguridad web, optimización de rendimiento, actualizaciones, copias de seguridad y resolución de incidencias técnicas, ayudando a que cada sitio funcione de forma rápida, estable y protegida. Nuestro enfoque combina soporte técnico profesional, buenas prácticas de seguridad y seguimiento continuo para ofrecer un servicio fiable, transparente y orientado a resultados reales.