SushiHost

Tutorial WordPress: Cambiar la tipografía del sitio usando @font-face sin afectar rendimiento

SushiHost

·

·

Cambiar la tipografía del sitio en WordPress usando @font-face sin afectar rendimiento

Este artículo explica, paso a paso y con ejemplos listos para usar, cómo implementar fuentes personalizadas en un sitio WordPress mediante @font-face y cómo hacerlo sin penalizar el rendimiento. Se cubren aspectos de preparación de archivos, integración en el tema, técnicas de carga óptima (preload, preconnect, font-display), subsetting, uso de WOFF2, cacheo y comprobaciones finales con herramientas de auditoría.

Resumen de la estrategia

  1. Preparar y convertir las fuentes (preferir WOFF2, generar subtítulos Latin/Es o subset necesario).
  2. Autohospedar las fuentes en el servidor o CDN para controlar cabeceras y reducir latencia.
  3. Declarar las fuentes con @font-face en un archivo CSS cargado lo más temprano posible.
  4. Preload preconnect para archivos críticos usar font-display ajustado según prioridad (swap/optional).
  5. Minimizar el tamaño: subsetting, compresión, variable fonts si aplican.
  6. Configurar cache y cabeceras HTTP correctamente.
  7. Auditar con Lighthouse / DevTools y ajustar.

1) Licencias y formatos — lo primero

No uses fuentes sin licencia adecuada. Si descargas de Google Fonts puedes autohospedarlas respetando la licencia. Para producción, prioriza estos formatos:

Herramientas recomendadas para convertir y subsetting: fonttools (pyftsubset), glyphhanger, Transfonter, o servicios como google-webfonts-helper para obtener archivos y CSS listos.

2) Preparar archivos y subsetting

Extrae solo los glifos que necesitas (por ejemplo: Latin básico, acentos en español). Con pyftsubset reduces mucho el peso. Ejemplo de comando para generar un WOFF2 subset (requiere fonttools):

pyftsubset MiFuente-Regular.ttf --output-file=MiFuente-Regular-subset.woff2 --flavor=woff2 --unicodes=U 0000-00FF, U 0100-017F --layout-features=

Explicación rápida: el parámetro –unicodes selecciona el rango Unicode que necesitas ajusta según el idioma. Esto reduce desde cientos de KB a decenas de KB si solo usas Latin básico.

3) Dónde colocar los archivos en WordPress

Opciones válidas:

Si usas CDN, asegúrate de que la cabecera Access-Control-Allow-Origin permita el origen del sitio (o sea ) para que los navegadores permitan la carga cross-origin cuando uses preload y fonts.

4) Declarar @font-face correctamente

Define @font-face en un archivo CSS que se cargue lo antes posible (idealmente en el head). Usa WOFF2 primero, luego WOFF. Incluye font-display. Un ejemplo recomendado (carga de familia MiFuente con peso 400):

@font-face {
  font-family: MiFuente
  src: url(/wp-content/uploads/fonts/MiFuente-Regular-subset.woff2) format(woff2),
       url(/wp-content/uploads/fonts/MiFuente-Regular.woff) format(woff)
  font-weight: 400
  font-style: normal
  font-display: swap
  unicode-range: U 0000-00FF, U 0100-017F
}

Recomendaciones sobre font-display:

5) Cargar la hoja CSS lo antes posible en WordPress

La hoja que contiene @font-face idealmente debe cargarse en el head con prioridad alta. Evita cargarla de forma diferida si la fuente es crítica para el render inicial. En functions.php puedes registrar y encolar la hoja como estilo con prioridad.

// functions.php (tema hijo)
function mi_tema_enqueue_fonts() {
  // Encolar archivo CSS que contiene @font-face
  wp_enqueue_style( mi-fuentes, get_stylesheet_directory_uri() . /assets/css/fonts.css, array(), 1.0 )
}
add_action( wp_enqueue_scripts, mi_tema_enqueue_fonts )

Si quieres insertar el CSS inline en el head (reduce una petición HTTP), puedes imprimirlo con wp_add_inline_style o directamente con wp_head — pero solo si el CSS es pequeño y crítico.

6) Preload Preconnect para mejorar tiempo de carga

Usa preconnect para dominios externos (si usas CDN o Google Fonts origin) y preload para los archivos WOFF2 más críticos. Ejemplo en functions.php para añadir enlaces en el head:

// functions.php
function mi_tema_preload_fonts() {
  // Preconnect a CDN (opcional)
  echo 
  // Preload del archivo WOFF2
  echo 
}
add_action( wp_head, mi_tema_preload_fonts, 1 )

Preload asegura que el navegador dé prioridad a la descarga del archivo de fuente siempre añadir el atributo crossorigin si el recurso se sirve con CORS (incluso en el mismo dominio a menudo es recomendable para consistencia).

7) Manejar FOUT/FOIT y control visual

Para minimizar cambios bruscos de layout:

html { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial }
h1, h2, h3, p { font-family: MiFuente, system-ui, -apple-system, Segoe UI, Roboto, Arial }

8) Opcional: usar Font Loading API o Web Font Loader para control avanzado

Si necesitas controlar el swap, clases CSS y fallback condicional, usa Web Font Loader (Google) o la Font Loading API. Ejemplo simple con la API nativa:

if (fonts in document) {
  document.fonts.load(1em MiFuente).then(function() {
    document.documentElement.classList.add(mi-fuente-cargada)
  }).catch(function(){ / manejar errores / })
}

Con esto puedes aplicar estilos condicionales en CSS cuando la fuente ya esté cargada (.mi-fuente-cargada) para suavizar cambios visuales.

9) Cache y cabeceras HTTP (importante)

Configura cabeceras para que los archivos de fuente se cacheen mucho tiempo (por ejemplo: Cache-Control max-age=31536000, immutable) y sirvelos comprimidos. Si usas Apache/Nginx, activa las reglas para WOFF/WOFF2. Ejemplo (Nginx):

location ~ .(?:woff2) {
  add_header Cache-Control public, max-age=31536000, immutable
}

Si usas CDN, habilita compresión y asegúrate de que la CDN preserve las cabeceras CORS necesarias.

10) Medir y auditar

Checklist de optimización (rápido)

Elemento Acción
Formato Usar WOFF2 WOFF fallback
Subsetting Reducir glifos a los necesarios
Carga Preload para fuentes críticas, preconnect si CDN externo
font-display Usar swap (o optional si se prioriza rendimiento extremo)
Cache Cabeceras de larga duración CDN
Auditoría Lighthouse / DevTools

Ejemplos completos listos para copiar

1) CSS @font-face fallback:

@font-face {
  font-family: MiFuente
  src: url(/assets/fonts/MiFuente-Regular-subset.woff2) format(woff2),
       url(/assets/fonts/MiFuente-Regular.woff) format(woff)
  font-weight: 400
  font-style: normal
  font-display: swap
  unicode-range: U 0000-00FF
}
html { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial }
body { font-family: MiFuente, system-ui, -apple-system, Segoe UI, Roboto, Arial }

2) Encolar CSS y añadir preload en functions.php:

// functions.php (tema hijo)
function mi_tema_fonts_setup() {
  // Encolar CSS que contiene @font-face
  wp_enqueue_style( mi-fuentes, get_stylesheet_directory_uri() . /assets/css/fonts.css, array(), 1.0 )
}
add_action( wp_enqueue_scripts, mi_tema_fonts_setup )

// Preload en head para WOFF2 crítico
function mi_tema_preload_fonts() {
  woff2_url = get_stylesheet_directory_uri() . /assets/fonts/MiFuente-Regular-subset.woff2
  echo n
}
add_action( wp_head, mi_tema_preload_fonts, 1 )

Consideraciones finales y trade-offs

Autohospedar y usar @font-face te da control y generalmente mejora privacidad y rendimiento frente a cargas externas, pero exige gestionar CORS, cache y conversiones. Elegir font-display: swap es una buena regla general para equilibrio entre UX y rendimiento. Subset y WOFF2 son las medidas más efectivas para reducir impacto. Si buscas máxima compatibilidad y menor tamaño, estudia variable fonts y combos de subsetting.

Aplica estas técnicas en un entorno de pruebas y audita antes de desplegar en producción. Con ello obtendrás tipografías personalizadas y una experiencia de usuario rápida y consistente.

SushiHost

Leave a Reply

Your email address will not be published. Required fields are marked *