La fuente predeterminada delata un sitio WordPress a primera vista. Una tipografía de sistema grita «no configuré nada» más fuerte que cualquier plantilla gratuita.

Cambiar la fuente toma diez minutos. No necesita ser desarrollador front-end ni pagar. Los cinco métodos a continuación lo cubren todo: desde principiantes que temen tocar código hasta propietarios de sitios que necesitan control total.

Hemos recopilado métodos funcionales actualizados a 2026. Desde el peor enfoque que todavía se recomienda en guías desactualizadas hasta la forma canónica «a la manera de WordPress».

💡 Resumen rápido:

• Elija una fuente: Google Fonts (gratis, más de 1500 tipografías), Adobe Fonts (suscripción a Creative Cloud) o suba sus propios archivos WOFF2 a su servidor.
• Decida si necesita un plugin (más simple, interfaz en el personalizador) o una conexión manual mediante functions.php (más limpio, más rápido, sin dependencia de código de terceros).
• Para el método manual: añada wp_enqueue_style en functions.php y font-family en el CSS.
• Para el método con plugin: instale EasyFonts o Use Any Font, seleccione una tipografía y guarde.
• Pruebe el resultado en diferentes navegadores y en dispositivos móviles: cada fuente adicional añade entre 50 y 200 KB a la carga de la página.

Por qué cambiar las fuentes de su sitio

La fuente moldea las primeras impresiones más rápido que los colores o las imágenes. Investigadores de la Universidad de Michigan demostraron en 2008 que un texto compuesto en una fuente compleja se percibe inconscientemente como «difícil». Es menos probable que los lectores sigan instrucciones y sobrestiman el tiempo necesario para completar una tarea.

Con serifa o sin serifa también importa. Las tipografías con serifa (Georgia, Merriweather) aumentan el tiempo de lectura, pero incrementan la autoridad percibida. Las fuentes sin serifa (Roboto, Inter) aceleran la lectura y funcionan mejor en pantallas móviles. Esto no es una conjetura: una revisión de investigaciones sobre psicología tipográfica confirma el efecto en la práctica.

Para un sitio WordPress, la fuente correcta resuelve tres problemas:

• Reconocimiento de marca. Una fuente única para los títulos evita que su sitio parezca «un blog más con un tema estándar».
• Legibilidad. Un tamaño, interlineado y contraste adecuados reducen la tasa de rebote.
• Jerarquía visual. Diferentes tipografías para títulos y cuerpo de texto guían la mirada del visitante.

Ahora vayamos a lo práctico.

Dónde conseguir fuentes para WordPress

Existen tres fuentes: Google Fonts, Adobe Fonts y el alojamiento propio. Examinemos cada una.

Google Fonts: gratuito y sin necesidad de registro

La fuente más obvia. Más de 1500 fuentes, licencia abierta, almacenamiento en caché a través de la CDN de Google. Adecuado para el 95% de los sitios.

Vaya a fonts.google.com. La interfaz le recibe con una cuadrícula de tarjetas que muestran una muestra de cada fuente.

Los filtros están a la izquierda. Puede filtrar por categoría (Serif, Sans Serif, Display, Handwriting, Monospace), idioma, número de estilos y peso. Los filtros se aplican al instante y los resultados se actualizan sin recargar.

Pase el cursor sobre una fuente para ver un menú que permite cambiar el texto de muestra. Introduzca su propio título o párrafo y vea cómo se ve.

Haga clic en «View specimen» para abrir la página de la fuente con todos los estilos, tabla de glifos y muestras en diferentes tamaños.

Si le gusta una fuente, haga clic en el signo más rojo en la esquina de la tarjeta. La fuente pasa al panel de colección en la parte inferior de la pantalla. Puede añadir varias familias: una para los títulos, otra para el cuerpo del texto.

Expanda el panel de colección para ver las pestañas «Embed» y «Customize».

En la pestaña «Customize», seleccione los estilos que necesite. Importante: no marque todos. Cada estilo es un archivo adicional que el navegador carga. Para un sitio típico, los estilos Regular (400) y Bold (700) son suficientes, a veces Itálica. El indicador de velocidad en la esquina superior derecha muestra cuánto ralentizará la carga la fuente.

Si su sitio utiliza un alfabeto no latino, seleccione el juego de caracteres correspondiente al final de la página. Para el cirílico, es «Cyrillic».

Dos botones con flechas en la parte superior: el de la izquierda comparte la colección, el de la derecha descarga los archivos de la fuente en su equipo. Resulta útil para Photoshop o si decide alojar la fuente usted mismo.

Adobe Fonts (antes Typekit)

Si tiene una suscripción a Creative Cloud, Adobe Fonts le da acceso a tipografías profesionales como Futura, Minion Pro y Myriad. Las fuentes se conectan mediante CSS, de forma similar a Google Fonts. El plan gratuito de Creative Cloud incluye un conjunto básico, suficiente para la mayoría de los proyectos.

Fuentes personalizadas en WOFF2

¿Compró una fuente con licencia o descargó una gratuita de Font Squirrel? Conviértala a WOFF2 (formato moderno de fuentes web, compresión Brotli, compatible con el 97% de los navegadores) y súbala a su servidor. Ventaja: no depende de una CDN de terceros y cumple con el RGPD. Desventaja: la fuente se carga desde su servidor, lo cual es inevitablemente más lento que la CDN de Google.

5 Formas de añadir fuentes personalizadas a WordPress

Existen exactamente cinco formas. Iremos desde «no haga esto» hasta el método ideal en WordPress.

Método 1: CSS @import (no haga esto)

Google Fonts ofrece una pestaña @import con una cadena CSS lista para usar. Parece práctico: copiar, pegar, listo.

Técnicamente, el código va al inicio del archivo style.css de su tema hijo:

1
/*
2
 Theme Name: Twenty Seventeen Child
3
 Theme URI: https://wordpress.org/themes/twentyseventeen/
4
 Template: twentyseventeen
5
 Author: the WordPress team
6
 Author URI: https://wordpress.org/
7
 Version: 1.0
8
*/
9
 
10
@import url('https://fonts.googleapis.com/css?family=Open+Sans|Roboto');
11
 
12
/* additional CSS goes here */

¿Por qué es la peor opción? @import impide que el navegador cargue varias hojas de estilo en paralelo. El navegador descarga el archivo CSS, ve el @import dentro y solo entonces obtiene la fuente. La carga secuencial en lugar de paralela supone una pérdida de 200 a 400 ms por fuente. En dispositivos móviles, esto es crítico.

No use @import para fuentes. Nunca.

Método 2: insertar una etiqueta link en header.php

Las bibliotecas de fuentes proporcionan una etiqueta <link> para insertar en el <head>. Puede colocarla directamente en header.php, el archivo de plantilla que tiene todo tema de WordPress.

Coloque el <link> entre las etiquetas <head> y </head>. Si trabaja con un tema hijo, copie header.php del tema padre al tema hijo y edítelo allí.

Este método funciona, pero es frágil: las actualizaciones del tema sobrescribirán sus cambios si no está usando un tema hijo. Además, mezclar contenido y código en plantillas es una mala práctica. Está bien para un experimento puntual, no para un uso permanente.

Método 3: @font-face y alojar las fuentes usted mismo

Si la fuente está en su servidor, necesita declararla mediante la directiva @font-face en su hoja de estilo. Primero, suba los archivos de fuente (WOFF2, WOFF) por FTP a la carpeta de su tema hijo, por ejemplo wp-content/themes/yourtheme-child/fonts/.

Luego añada a style.css:

1
@font-face {
2
  font-family: 'Roboto';
3
  src: url('fonts/Roboto-Regular.woff2') format('woff2'),
4
       url('fonts/Roboto-Regular.woff') format('woff');
5
  font-weight: normal;
6
  font-style: normal;
7
  font-display: swap;
8
}

El parámetro font-display: swap es importante: indica al navegador que muestre primero el texto con una fuente del sistema y luego la reemplace por la fuente personalizada una vez que se cargue. Sin esto, los visitantes ven una pantalla en blanco mientras la fuente se carga.

No olvide reemplazar el nombre y la ruta de la fuente. Si su archivo de origen es TTF u OTF, conviértalo a WOFF2 usando el conversor en línea de Font Squirrel.

Este método otorga control total, pero pierde frente a Google Fonts en velocidad: su servidor es casi con toda seguridad más lento que la CDN de Google. Para sitios con hasta 10 000 visitantes al mes, la diferencia es imperceptible. Para proyectos de alto tráfico, es crítica.

Método 4: functions.php y wp_enqueue_style (la forma canónica en WordPress)

El método más correcto desde la perspectiva de la arquitectura de WordPress. En lugar de insertar código en una plantilla, usted «encola» la hoja de estilo con la fuente mediante el hook wp_enqueue_scripts.

El código va en el archivo functions.php del tema activo o del tema hijo. Aquí tiene un ejemplo funcional para Google Fonts:

1
function techblog_add_google_fonts() {
2
    wp_enqueue_style(
3
        'techblog-google-fonts',
4
        'https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Playfair+Display:wght@700&display=swap',
5
        array(),
6
        null
7
    );
8
}
9
add_action( 'wp_enqueue_scripts', 'techblog_add_google_fonts' );

La función wp_enqueue_style acepta cuatro parámetros: un nombre único (handle), la URL de la hoja de estilo, un array de dependencias (vacío aquí) y la versión (null, WordPress sustituirá la suya propia). El hook wp_enqueue_scripts garantiza que el código se ejecute en el momento adecuado durante la carga de la página.

Para fuentes de Adobe, antes se usaba JavaScript y wp_enqueue_script. Ahora Adobe Fonts ha cambiado a un enfoque CSS similar al de Google Fonts, por lo que wp_enqueue_style cubre ambos servicios.

Por qué este es el mejor método manual:

• Las fuentes no se sobrescribirán durante las actualizaciones del tema (si está en un tema hijo).
• WordPress gestiona el orden de carga y resuelve las dependencias.
• El código está aislado en functions.php, las plantillas permanecen limpias.
• Otros plugins pueden desactivar o modificar su llamada mediante hooks estándar.

Método 5: plugin (si no quiere tocar código)

¿No está listo para meterse en functions.php? Un plugin resuelve el problema sin una sola línea de código.

Easy Google Fonts (ejemplo visual, pero no para sitios en producción)

El plugin de fuentes más antiguo del directorio de WordPress. Proporciona una interfaz en el personalizador: seleccione una fuente, vea los cambios en tiempo real, guarde.

La instalación es la estándar: Plugins → Añadir nuevo → busque «Easy Google Fonts» → Instalar → Activar.

Tras la activación, aparece un nuevo elemento «Typography» en Apariencia → Personalizar. Entre, seleccione Typography Default y verá los controles de fuente para párrafos y encabezados.

Haga clic en el desplegable junto al elemento que desee cambiar. Se expande un menú:

La opción más importante es Font Family. Aquí tiene acceso a toda la biblioteca de Google Fonts (más de 600 tipografías). Las fuentes están agrupadas por categoría: serif, sans-serif, Display, Handwriting, Monospace. Puede buscar por nombre.

Haga clic en una fuente y los cambios se verán inmediatamente en la vista previa de la derecha.

A continuación, los ajustes finos. La pestaña Font Weight/Style controla el peso. Text Decoration añade subrayado, tachado o línea superior. Text Transform cambia las mayúsculas y minúsculas: todo mayúsculas, minúsculas o capitalizar.

En la pestaña Appearance: color de fuente, color de fondo, tamaño, interlineado y espaciado entre letras.

La pestaña Positioning: márgenes, relleno, bordes, radio del borde y la propiedad display.

Cuando termine, haga clic en Save and Publish en la parte superior.

Advertencia sincera: Easy Google Fonts no se actualiza desde 2020. En WordPress 6.4+, es posible que el plugin no funcione. Algunos usuarios se quejan de que la opción «Typography» no aparece en el personalizador. Lo mostramos como una ilustración del enfoque: la mayoría de los plugins de fuentes funcionan mediante el mismo mecanismo del personalizador.

Qué hacer si la fuente no cambia

Algunos temas usan selectores CSS no estándar. Un encabezado podría no ser simplemente <h1>, sino <h1 class="entry-title">, y el plugin «no ve» ese elemento.

Solución: cree su propio control de fuente en Settings → Google Fonts.

Vincule el selector CSS requerido al nuevo control y active la opción de forzar la sobrescritura. Tras guardar, el control aparecerá en el personalizador junto a los estándar.

Plugins alternativos (vigentes en 2026)

Easy Google Fonts no es la única opción. Tres alternativas activas:

• EasyFonts aloja Google Fonts localmente en su servidor. Detecta automáticamente las fuentes en uso, las descarga y las sirve desde su dominio. Más rápido que las solicitudes CDN estándar, además de cumplir plenamente con el RGPD. El más ligero de los tres en cuanto a impacto en el rendimiento.
• Use Any Font le permite subir sus propias fuentes sin CSS. El plugin convierte TTF/OTF/WOFF a formato web y las aloja en su servidor. Adecuado para fuentes comerciales adquiridas bajo licencia.
• Fonts Plugin es un gestor alternativo de Google Fonts con vista previa en el personalizador. A diferencia del anticuado Easy Google Fonts, se actualiza con regularidad y se prueba con las versiones actuales de WordPress.

Aplicar la fuente a los elementos del sitio

La fuente está conectada, pero todavía «flota en el aire». Debe indicarle al navegador a qué elementos aplicarla.

Aquí tiene el CSS básico para reemplazar la fuente de los encabezados. Añádalo mediante Apariencia → Personalizar → CSS adicional:

1
h1,
2
h2,
3
h3,
4
h4,
5
h5,
6
h6 {
7
    font-family: 'Roboto', sans-serif;
8
}

Para el texto del cuerpo:

1
body,
2
p,
3
li {
4
    font-family: 'Inter', sans-serif;
5
}

Un matiz importante: el nombre de la fuente en font-family debe coincidir exactamente con el que declara la librería. Google Fonts utiliza 'Roboto', mientras que Adobe Fonts puede devolver 'open-sans' (sin espacio y sin comillas). Revise con atención el código que le proporciona el servicio, no el nombre de la fuente que aparece en el sitio web.

Puede añadir este CSS de tres maneras: mediante el personalizador (la más sencilla, sobrevive a las actualizaciones del tema), a través del archivo style.css del tema hijo o mediante el hook wp_head. Recomendamos la primera.

⁉️🤔 Preguntas frecuentes

¿Cuántas fuentes se pueden añadir a un sitio sin perder velocidad?

De forma óptima, dos familias: una para los títulos y otra para el cuerpo del texto. Cada fuente adicional añade una petición HTTP y entre 50 y 200 KB de peso a la página. Tres fuentes ya es el límite máximo. Y conecte solo los estilos que necesite: Regular (400) y Bold (700) pesan la mitad que un conjunto de 5 o 6 estilos.

Google Fonts o Adobe Fonts: ¿cuál elegir?

Para 9 de cada 10 sitios, Google Fonts. Gratuito, rápido (CDN de Google), más de 1500 fuentes, el cirílico está disponible en casi todas las tipografías populares. Adobe Fonts tiene sentido si ya tiene una suscripción a Creative Cloud y necesita una fuente comercial específica como Futura o Minion Pro.

¿Se puede usar un archivo TTF descargado del ordenador?

Se puede, pero primero conviértalo a WOFF2 (formato comprimido moderno para la web). Los archivos TTF no están comprimidos y ocupan bastante más espacio. WOFF2 con compresión Brotli reduce el tamaño del archivo varias veces. Conversor: Font Squirrel Webfont Generator.

¿Plugin o functions.php: qué es más fiable?

functions.php es más fiable para uso a largo plazo: sin dependencias adicionales, el código es transparente, las actualizaciones del plugin no le afectan. Los plugins ganan en comodidad: 5 minutos frente a media hora aprendiendo hooks. Para un sitio en producción, elija wp_enqueue_style en un tema hijo. Para un prototipo rápido o un sitio de cliente que necesite una interfaz sencilla, use un plugin.

¿Por qué la fuente se ve diferente en el móvil que en el escritorio?

Los navegadores móviles a veces sustituyen las fuentes del sistema o renderizan el suavizado de bordes de forma distinta. Además, los tamaños de pantalla son diferentes: 16px en escritorio se lee bien, pero en un teléfono puede resultar demasiado grande. Solución: establezca un tamaño relativo usando clamp() (por ejemplo font-size: clamp(16px, 2.5vw, 20px)) y pruebe en un dispositivo real, no en un emulador.

Resumen final: qué usar en su sitio en 2026

Si resumimos todo en cinco frases:

• Google Fonts es la fuente tipográfica por defecto. Suficiente para el 95% de los proyectos: rápido, gratuito, el cirílico está disponible en todas partes.
• functions.php + wp_enqueue_style es el mejor método manual. Limpio, sobrevive a las actualizaciones del tema, el código es transparente.
• El plugin EasyFonts funciona si quiere un alojamiento local de Google Fonts sin complicaciones de código. Más rápido que el CDN estándar y conforme al RGPD.
• Dos estilos por fuente, no más: Regular y Bold. Cada estilo adicional roba entre 30 y 50 KB de carga.
• WOFF2, no TTF: convierta antes de subir a su servidor. Ahorra medio megabyte por página.

Cambiar las fuentes es una de esas tareas donde una hora de configuración cuidadosa produce años de beneficio visual. Empiece ahora mismo: vaya al sitio web de Google Fonts, encuentre un par de tipografías para su proyecto y pruebe el método 4 de la lista anterior.