Las fuentes self-hosted optimizadas consisten en alojar tipografías en el propio dominio para reducir la latencia. Esto implica convertir a woff2 , aplicar subsetting , usar font-display: swap , preload y configurar cabeceras de caché y CORS. Sirve para propietarios de WordPress que buscan más privacidad y mejor rendimiento.
Fuentes self-hosted optimizadas Resumen del proceso
Convertir y subsetear fuentes a woff2 para reducir peso.
Subir las fuentes al servidor o a un CDN propio.
Añadir reglas CSS con @font-face y font-display swap.
Preloadar solo variantes críticas y configurar caché y CORS.
Medir antes y después con Lighthouse y Core Web Vitals .
Paso 1 Subir y convertir fuentes
El primer paso es obtener archivos de la fuente y verificar licencia. No todas las Google Fonts permiten redistribución local. Comprobar la licencia evita problemas legales.
Para convertir y reducir peso, puede usar las siguientes herramientas reproducibles. Instalar fonttools y woff2 en la máquina de desarrollo.
pip install fonttools
woff2_compress fuente.ttf
pyftsubset fuente.ttf --output-file= fuente-subset.woff2 --unicodes= "U+0020-007E" --flavor= woff2
💡 Consejo
Paso 2 Configurar CSS y preload
Crear un bloque @font-face claro y con fallback. Incluir formatos y la regla font-display .
@ font-face {
font-family : 'MiFuente' ;
src : url ( '/fonts/MiFuente-subset.woff2' ) format ( 'woff2' );
font-weight : 400 700 ;
font-style : normal ;
font-display : swap ;
unicode-range : U + 0000-00FF ; /* Ejemplo para Latin básico y Latin-1 Supplement. Ajustar el rango según el subsetting real (p. Ej. U+0100-024F para Latin Extended). Usar rangos completos en formato U+XXXX-YYYY. */
}
Preloadar solo la variante principal para evitar bloquear el LCP. Preloadar más de dos archivos es un error común.
✉
¿Quieres más información? Escríbenos y te orientamos
Paso 3 Ajustes en servidor y CDN
Configurar cabeceras correctas evita problemas de caché y de CORS. Para Nginx usar estas líneas en el bloque server o location.
location ~ * /.(?:woff2) $ {
add_header Cache-Control "public, max-age=31536000, immutable" ;
add_header Access-Control-Allow-Origin "*" ;
}
Para Apache añadir en .htaccess o configuración principal.
<FilesMatch "/.(woff2)$" >
Header set Cache-Control "public, max-age=31536000, immutable"
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
Revisar políticas del CDN si se usa para asegurar que preserve las cabeceras.
Revisar métricas antes y después aporta evidencia clara del impacto.
Infografía del flujo de trabajo HTML CSS
Flujo para fuentes self-hosted optimizadas
1. Convertir a woff2
2. Subset
3. Subir al servidor
4. @font-face + preload
5. Cabeceras caché y CORS
Mejores plugins fuentes self-hosted para principiantes
La opción más sencilla para quien evita la consola es usar un plugin. Plugins recomendados:
Local Fonts plugin: fácil de usar y mantiene control de variantes.
Self-Hosted Google Fonts: diseñado para reemplazar Google CDN.
Ambos permiten subir woff2 y autogenerar @font-face. Local Fonts destaca por su interfaz simple.
Criterio
Local Fonts plugin
Método manual
Cuándo elegir cada uno
Facilidad
Alta, interfaz gráfica
Media, requiere comandos
Plugin si no quiere usar la consola. Manual si necesita control fino
Control de subsetting
Limitado
Total, con fonttools
Manual para optimización avanzada
Riesgo legal
Igual que manual
Depende de la licencia
Verificar licencia antes de subir siempre
La recomendación general es usar un plugin para empezar y pasar a manual si necesita subsetting fino.
✉
¿Quieres más información? Escríbenos y te orientamos
Mejor plugin fuentes locales para web lenta
En el contexto de una web lenta, la prioridad es minimizar bytes transferidos y evitar render-blocking. Local Fonts simplifica la subida y sirve woff2.
Si el sitio depende de muchas familias o pesos, es mejor el método manual con subsetting por idioma. El método manual ahorra bytes cuando se generan subsets por página.
Errores que arruinan el resultado
Cargar todas las variantes sin necesidad duplica el peso de la página. Preloadar demasiadas variantes bloquea el LCP y empeora Core Web Vitals.
No configurar Cache-Control evita que el navegador reutilice las fuentes. Olvidar CORS provoca fallos en algunos navegadores y errores en la consola.
Cuándo no funciona este método y alternativas
No es necesario autohospedar si se usan fuentes del sistema. Las system fonts no añaden peticiones y son la opción más rápida.
Tampoco aplica si la licencia prohíbe hospedaje local o si el proveedor CDN ya optimiza y cumple con los requisitos de privacidad. En esos casos, mantener al proveedor es la alternativa segura.
⚠️ Atención
✉
¿Quieres más información? Escríbenos y te orientamos
Medir impacto y ejemplos reales
Según W3Techs 2024, WordPress tiene cerca del 43% del mercado web; según HTTP Archive 2024, la media de peso de página ronda 2.1 MB. Google 2024 define LCP óptimo por debajo de 2.5 segundos.
Un caso típico fue reducir 120 KB de fuentes y mejorar LCP de 2.9 s a 2.3 s tras subsetting y preload selectivo. Esa mejora es replicable en sitios con pocas familias.
Pipelines automatizados y despliegue
Se puede automatizar con GitHub Actions para convertir y subir fuentes al deploy. El flujo incluye convertir, generar subsets y subir al servidor o al bucket del CDN.
Ejemplo de comando para CI usando fonttools y woff2 ya mostrado. Integrar paso de verificación de licencia antes del deploy.
Para equipos que prefieren trabajar completamente en consola y en CI, conviene un flujo reproducible paso a paso. Primero, instalar herramientas (en Debian/Ubuntu sudo apt install woff2; o compilar woff2 desde https://github.com/google/woff2) y fonttools (pip install fonttools). Flujo recomendado para archivo fuente fuente-original.ttf:
Generar una versión .ttf limpia si procede
Crear subset con pyftsubset: pyftsubset fuente-original.ttf --output-file=fuente-es-subset.ttf --unicodes="U+0000-00FF, U+0100-017F" --layout-features='' --glyphs=' ' --flavor=truetype
Convertir a woff2: woff2_compress fuente-es-subset.ttf (genera fuente-es-subset.woff2)
Opcionalmente crear .woff con sfnt2woff-zopfli para compatibilidad: sfnt2woff-zopfli fuente-es-subset.ttf. Nombres de archivo claros (familia-pais-peso.woff2) facilitan despliegues y invalidaciones en CDN. Siempre verificar la licencia antes del proceso y conservar los archivos originales para reclasificación si se necesita soporte completo de glifos
Al configurar @font-face es útil publicar un bloque completo que cubra local(), varios formatos y unicode-range por subconjunto, además de un stack de reserva robusto. Ejemplo práctico (ajustar nombres y rutas):
@ font-face {
font-family : 'MiFuente Variable' ;
src : local ( 'MiFuente Variable' ),
url ( '/fonts/MiFuente-var.woff2' ) format ( 'woff2' ),
url ( '/fonts/MiFuente-var.woff' ) format ( 'woff' );
font-weight : 100 900 ;
font-style : normal ;
font-display : swap ;
unicode-range : U + 0000-00FF ; /* Latin básico + Latin-1 */
}
@ font-face {
font-family : 'MiFuente Variable' ;
src : url ( '/fonts/MiFuente-var-latin-ext.woff2' ) format ( 'woff2' );
font-weight : 100 900 ;
font-style : normal ;
font-display : swap ;
unicode-range : U + 0100-024F ; /* Latin Extended-A/B */
}
Un stack de reserva recomendado: font-family: 'MiFuente Variable', Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif. Incluir local() acelera la carga cuando el usuario ya tiene la fuente instalada, y dividir unicode-range por subconjuntos permite servir solo lo necesario por página/idioma.
Automatizar en CI evita errores manuales y garantiza consistencia: un workflow de GitHub Actions puede ejecutar la conversión, el subsetting y el despliegue al bucket/CDN con cabeceras correctas. Flujo sugerido: checkout, instalar Python y woff2, instalar fonttools, ejecutar scripts que generen subsets por idioma y pesos, comprimir a .woff2, y subir artefactos al bucket (ej. AWS S3) usando acciones oficiales con metadata (Cache-Control: public, max-age=31536000, immutable). Ejemplo resumido de pasos en YAML: usar actions/checkout, actions/setup-python, pip install fonttools, ejecutar scripts shell que llamen a pyftsubset y woff2_compress, y luego jakefs/s3-sync-action para subir con --cache-control. Añadir un paso opcional que ejecute Lighthouse CI o una auditoría ligera para medir LCP antes/después, y otro que verifique un archivo LICENSE o manifiesto para evitar desplegar fuentes con restricciones. Así se integra generación, verificación legal y despliegue en un solo pipeline reproducible.
Preguntas frecuentes
¿Puedo alojar fuentes de Google en mi servidor?
Sí. Muchas Google Fonts permiten descarga y alojamiento local. Verificar la licencia y cachear correctamente. Para dudas revisar la FAQ oficial de Google Fonts.
¿WordPress autohospedado es gratuito?
WordPress en sí es gratuito. El alojamiento y CDN tienen coste. Autohospedar fuentes solo añade espacio y ancho de banda mínimo.
¿Qué plugin de WordPress ayuda a mejorar el SEO de tu tienda en línea?
Plugins como WP Rocket ayudan al rendimiento, lo que impacta SEO. Controlar fuentes reduce LCP y mejora experiencia.
¿Cuáles son los mejores plugins para ventanas emergentes en WordPress?
Este FAQ responde otras dudas comunes. Para popups usar plugins ligeros que no carguen fuentes extra.
¿Cuál es la diferencia entre woff2 y variable fonts?
Corrección: La comparación es imprecisa: woff2 es un formato/contener comprimido que reduce bytes en la transferencia, mientras que 'variable fonts' (tecnología OpenType) agrupa múltiples ejes (peso, ancho, cursiva, etc.) en un único archivo. Una variable font puede distribuirse como .ttf, .woff o .woff2, por lo que no son mutuamente excluyentes; lo habitual es usar .woff2 para publicar variable fonts en la web y así combinar compresión y flexibilidad.
¿Cómo medir la mejora tras autohospedar fuentes?
Medir con Lighthouse o PageSpeed y con Core Web Vitals. Comparar LCP y tamaño transferido antes y después. Registrar resultados en dos pruebas separadas.
¿Qué alternativas seguras hay a usar un plugin fuentes self-hosted?
Alternativas:
Usar system fonts para evitar peticiones.
Mantener CDN del proveedor si ofrece privacidad y caché adecuados.
Enlaces útiles
fonttools en GitHub
FAQ de Google Fonts
HTTP Archive State of the Web
