Google Fonts en WordPress: cómo usarlas sin perjudicar tu web

Una fuente cambia mucho más de lo que parece.

Hay webs que con la misma estructura pasan de verse pobres a verse cuidadas solo por elegir bien la tipografía. Y también pasa lo contrario: una web que estaba limpia se vuelve lenta, rara o incómoda de leer porque alguien ha añadido tres familias, siete grosores y varias llamadas externas sin pensar demasiado.

Con Google Fonts en WordPress pasa justo eso. Puede ser una solución muy cómoda para mejorar el diseño de una web, pero no conviene instalar fuentes como quien prueba colores. La tipografía afecta a la imagen, a la lectura, a la velocidad, al mantenimiento y, en algunos casos, también a la privacidad.

En esta guía vamos a ver las formas principales de añadir fuentes de Google a WordPress, cuándo conviene usar cada una, qué precauciones tomar y qué errores evitar para no estropear una web por algo que parecía solo estético.

Qué son Google Fonts

Google Fonts es una biblioteca de fuentes tipográficas que se pueden usar en páginas web. Incluye familias muy conocidas como Roboto, Open Sans, Montserrat, Lato, Poppins, Merriweather, Playfair Display y muchas otras.

Su ventaja es clara: permite usar tipografías profesionales sin tener que comprar una licencia individual para cada web. Pero eso no significa que haya que cargar cualquier fuente de cualquier forma.

Cuando eliges una fuente en Google Fonts, normalmente puedes usarla de dos maneras:

• Cargando la fuente desde los servidores de Google mediante una URL CSS.
• Descargando los archivos de la fuente y alojándolos localmente en tu propia web.

La primera opción suele ser más rápida de aplicar. La segunda puede ser mejor si quieres reducir llamadas externas y controlar mejor la carga de recursos.

Antes de añadir fuentes: decide cuántas necesitas

El error más común no es elegir una mala fuente. Es elegir demasiadas.

Para la mayoría de webs, suele bastar con una o dos familias tipográficas:

• Una fuente para textos generales.
• Una fuente para títulos, si quieres diferenciar algo más el diseño.

Y no necesitas todos los grosores. Cada peso adicional puede añadir carga. Si usas regular, semibold y bold, probablemente sea suficiente en muchos casos.

Decisión	Recomendación práctica	Riesgo si te pasas
Número de familias	Una o dos fuentes como máximo en la mayoría de webs.	Diseño incoherente y más carga.
Pesos	Usar solo los necesarios: 400, 600 y 700 suele bastar.	Archivos innecesarios y peor rendimiento.
Estilos	Añadir cursiva solo si realmente se usa.	Cargar variantes que no aparecen en la web.
Uso	Definir cuerpo, títulos, botones y menús con criterio.	Web visualmente desordenada.

Formas de añadir Google Fonts a WordPress

Hay varias formas de usar Google Fonts en WordPress. No todas son igual de cómodas ni igual de recomendables para todos los usuarios.

Las opciones más habituales son:

• Usarlas desde las opciones del tema.
• Usarlas desde un constructor visual.
• Instalarlas con la biblioteca de fuentes de WordPress.
• Añadirlas mediante un plugin.
• Cargarlas manualmente con código.
• Alojarlas localmente en tu propio servidor.

La elección depende de tu tema, de tu nivel técnico y de lo que quieras conseguir.

Opción 1: usar las opciones del tema

Muchos temas de WordPress ya incluyen ajustes de tipografía. En algunos casos puedes elegir Google Fonts directamente desde el personalizador, desde las opciones del tema o desde el editor del sitio.

Esta suele ser la opción más sencilla si tu tema la ofrece bien.

El proceso suele ser parecido a este:

1. Entra en el panel de WordPress.
2. Ve a Apariencia.
3. Abre Personalizar o el editor del sitio, según tu tema.
4. Busca una sección llamada Tipografía, Fonts o similar.
5. Elige la fuente para cuerpo de texto, títulos, menús o botones.
6. Guarda los cambios.
7. Revisa la web desde ordenador y móvil.

Opción 2: usar la biblioteca de fuentes de WordPress

WordPress ha ido mejorando la gestión de diseño y tipografías, especialmente en temas de bloques. En algunas instalaciones puedes gestionar fuentes desde la biblioteca de fuentes, subir archivos propios o instalar fuentes desde Google Fonts.

Esta opción puede ser interesante si tu tema es compatible y trabajas con el editor del sitio.

El flujo habitual sería:

1. Entrar en el editor del sitio.
2. Abrir estilos globales.
3. Acceder a la zona de tipografía.
4. Gestionar o instalar fuentes.
5. Asignarlas a texto, encabezados u otros elementos.
6. Guardar cambios globales.

No todas las webs WordPress funcionan igual. En temas clásicos, builders o instalaciones antiguas, puede que esta opción no aparezca o no sea la más cómoda.

Opción 3: añadir Google Fonts con un plugin

Los plugins de fuentes son una opción cómoda para usuarios que no quieren tocar código. Permiten elegir tipografías desde el panel de WordPress y aplicarlas a distintas partes de la web.

El proceso general suele ser:

1. Ir a Plugins.
2. Entrar en Añadir nuevo.
3. Buscar un plugin de Google Fonts o tipografías.
4. Instalarlo y activarlo.
5. Configurar las fuentes desde sus ajustes.
6. Revisar la web y guardar cambios.

La ventaja es la facilidad. El inconveniente es que añades otra pieza más a la web. Si el plugin no está bien mantenido, carga demasiados recursos o se solapa con el tema, puede generar problemas.

Usar plugin	Ventaja	Precaución
Usuario sin código	Permite cambiar fuentes desde el panel.	No instalar varios plugins que hagan lo mismo.
Web con tema limitado	Añade opciones que el tema no trae.	Revisar compatibilidad con el diseño actual.
Necesidad de carga local	Algunos plugins ayudan a alojar fuentes localmente.	Comprobar que realmente elimina llamadas externas.

Opción 4: añadir Google Fonts con código

También puedes añadir Google Fonts a WordPress mediante código. Esta opción da más control, pero exige más cuidado.

El método habitual consiste en cargar la hoja de estilos de Google Fonts con wp_enqueue_style() y después aplicar la fuente con CSS.

Paso 1: elegir la fuente en Google Fonts

Entra en Google Fonts, elige la familia que quieres usar y selecciona los pesos necesarios. Por ejemplo, podrías elegir Roboto con pesos 400 y 700.

Una URL de Google Fonts puede tener este aspecto:

https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap

El parámetro display=swap ayuda a que el texto pueda mostrarse con una fuente alternativa mientras carga la fuente final. Esto puede mejorar la percepción de carga, aunque también puede producir un pequeño cambio visual cuando la fuente termina de cargar.

Paso 2: cargar la fuente desde functions.php

En un tema hijo, puedes añadir algo como esto en el archivo functions.php:

function ideaweb_cargar_google_fonts() {
    wp_enqueue_style(
        'ideaweb-google-fonts',
        'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap',
        array(),
        null
    );
}
add_action( 'wp_enqueue_scripts', 'ideaweb_cargar_google_fonts' );

Este código carga la fuente Roboto con los pesos 400 y 700.

Si quisieras cargar dos familias, por ejemplo Roboto y Playfair Display, la URL podría ser parecida a esta:

function ideaweb_cargar_google_fonts() {
    wp_enqueue_style(
        'ideaweb-google-fonts',
        'https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Roboto:wght@400;700&display=swap',
        array(),
        null
    );
}
add_action( 'wp_enqueue_scripts', 'ideaweb_cargar_google_fonts' );

Paso 3: aplicar la fuente con CSS

Después puedes aplicar la fuente en tu CSS:

body {
    font-family: 'Roboto', Arial, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Playfair Display', Georgia, serif;
}

En este ejemplo, Roboto se usa para el texto general y Playfair Display para los títulos.

Cómo aplicar Google Fonts solo a ciertos elementos

No siempre quieres cambiar toda la web. A veces solo necesitas aplicar una fuente a títulos, botones, menús o una sección concreta.

Por ejemplo:

.menu-principal a {
    font-family: 'Roboto', Arial, sans-serif;
    font-weight: 700;
}

.boton-principal {
    font-family: 'Roboto', Arial, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
}

.bloque-destacado h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
}

Esto te permite controlar mejor el diseño sin cambiar elementos que ya funcionaban bien.

Opción 5: alojar Google Fonts localmente

Alojar las fuentes localmente significa descargar los archivos de la fuente y servirlos desde tu propio servidor, en lugar de cargarlos desde Google cada vez que alguien visita la web.

Esta opción puede ser interesante por tres motivos:

• Reducir llamadas externas.
• Tener más control sobre la carga.
• Mejorar privacidad al no solicitar la fuente desde servidores externos.

También requiere más cuidado. Hay que descargar los formatos adecuados, subirlos al servidor, declarar la fuente con @font-face y aplicarla correctamente.

Ejemplo de carga local con @font-face

Supongamos que has subido una fuente a esta carpeta de tu tema hijo:

/wp-content/themes/tu-tema-hijo/fonts/roboto-regular.woff2
/wp-content/themes/tu-tema-hijo/fonts/roboto-bold.woff2

Podrías declararla así en tu CSS:

@font-face {
    font-family: 'Roboto Local';
    src: url('fonts/roboto-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto Local';
    src: url('fonts/roboto-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: 'Roboto Local', Arial, sans-serif;
}

Si usas esta vía, comprueba que las rutas son correctas. Un error de ruta hará que la fuente no cargue y la web use la fuente alternativa.

Google Fonts, privacidad y llamadas externas

Durante años se han cargado Google Fonts desde servidores externos sin darle demasiadas vueltas. Hoy conviene revisarlo mejor, sobre todo en webs europeas o proyectos donde la privacidad y el cumplimiento legal importan.

Cuando una web carga fuentes desde dominios externos, el navegador del usuario hace solicitudes fuera de tu propio sitio. Por eso muchas webs optan por alojar las fuentes localmente o revisar cómo se cargan.

No todas las webs tienen el mismo riesgo ni la misma configuración. Pero sí conviene hacerse estas preguntas:

• ¿La fuente se carga desde Google o desde mi servidor?
• ¿Mi tema carga Google Fonts aunque yo no lo sepa?
• ¿El constructor visual añade fuentes externas?
• ¿Tengo varios plugins cargando tipografías distintas?
• ¿La política de privacidad refleja correctamente los recursos externos?

Cómo saber si tu web carga Google Fonts desde fuera

Puedes comprobarlo de varias formas. La más técnica es abrir las herramientas de desarrollador del navegador y revisar las solicitudes de red.

Una forma sencilla:

1. Abre tu web en Chrome, Firefox o Edge.
2. Haz clic derecho y pulsa Inspeccionar.
3. Ve a la pestaña Red o Network.
4. Recarga la página.
5. Busca solicitudes a dominios como fonts.googleapis.com o fonts.gstatic.com.

Si aparecen, tu web está cargando fuentes desde Google.

También puedes usar herramientas de análisis de rendimiento para ver recursos externos, aunque conviene interpretar los resultados con criterio.

Rendimiento: menos fuentes, menos pesos, menos problemas

Las fuentes pueden afectar a la velocidad de una web. No siempre son el principal problema, pero sí pueden sumar carga si se usan mal.

Buenas prácticas:

• No cargar más familias de las necesarias.
• No cargar pesos que no usas.
• No cargar cursivas si no aparecen en la web.
• Usar font-display: swap cuando proceda.
• Alojar localmente si tiene sentido.
• Evitar que tema, plugin y constructor carguen la misma fuente por separado.
• Revisar la carga real en varias páginas, no solo en la home.

Google Fonts con Elementor, Divi y otros constructores

Muchos constructores visuales permiten elegir Google Fonts desde sus propios ajustes. Esto es cómodo, pero puede provocar duplicidades si el tema también carga fuentes o si además instalas un plugin de tipografías.

Si usas un constructor visual, revisa:

• Qué fuente global está definida.
• Si cada widget tiene fuentes personalizadas.
• Si hay estilos heredados del tema.
• Si se están cargando familias que ya no usas.
• Si existe opción para desactivar Google Fonts externas.

En webs con Elementor, Divi u otros constructores, la mejor solución no siempre es añadir más código. A veces basta con ordenar estilos globales y eliminar cargas duplicadas.

Errores habituales al añadir Google Fonts en WordPress

Cargar demasiadas familias

Dos fuentes suelen ser suficientes. Cinco familias distintas hacen que la web parezca menos profesional y pueden añadir carga innecesaria.

Instalar un plugin sin revisar el tema

Muchos temas ya gestionan tipografías. Instalar un plugin encima puede duplicar funciones y recursos.

Tocar functions.php sin copia de seguridad

Un error de sintaxis puede romper la web. Si vas a editar código, haz copia y asegúrate de poder revertir el cambio.

Cargar la fuente desde varios sitios

Puede ocurrir que el tema cargue una fuente, el constructor otra y un plugin una tercera. El resultado es más peso y menos control.

No revisar móvil

Una fuente que se ve elegante en escritorio puede leerse mal en móvil si el tamaño, el interlineado o el peso no están bien ajustados.

Olvidar la privacidad

Si la web carga recursos externos, conviene saberlo y revisar si encaja con la configuración legal de la página.

Usar fuentes decorativas para texto largo

Una fuente llamativa puede funcionar en un título, pero ser incómoda para párrafos largos. La lectura manda.

Qué opción elegir según tu caso

Tu situación	Opción recomendada	Motivo
Tu tema ya permite cambiar fuentes	Usar opciones del tema.	Evitas añadir plugins o código innecesario.
Usas tema de bloques compatible	Biblioteca de fuentes de WordPress.	Permite gestionar tipografías desde el editor.
No sabes código y tu tema no ayuda	Plugin de fuentes.	Más sencillo para usuarios no técnicos.
Quieres control técnico	Código con wp_enqueue_style.	Permite cargar exactamente lo que necesitas.
Te preocupa privacidad o rendimiento	Carga local.	Reduce llamadas externas y da más control.

Cuándo pedir ayuda con las fuentes de WordPress

Añadir una fuente puede parecer una tarea pequeña, pero a veces destapa problemas más grandes: tema antiguo, constructor desordenado, carga duplicada, mala optimización, errores de CSS o una web que no tiene estilos globales claros.

Conviene pedir ayuda si:

• No sabes desde dónde se cargan las fuentes actuales.
• La web carga lenta después de cambiar tipografías.
• No sabes si las fuentes se sirven localmente o desde Google.
• Has tocado código y la web ha dado error.
• El diseño cambia en unas páginas sí y en otras no.
• Usas Elementor, Divi u otro constructor y hay estilos mezclados.
• Quieres revisar rendimiento, privacidad y diseño de forma conjunta.

En ideaWeb podemos ayudarte con mantenimiento WordPress, revisión técnica, optimización y ajustes de diseño para que la web cargue bien y mantenga una imagen coherente.

También trabajamos diseño web WordPress cuando la web necesita una revisión más profunda de estructura, diseño, textos, velocidad y mantenimiento.

Preguntas frecuentes sobre Google Fonts en WordPress

¿Puedo usar Google Fonts en WordPress?

Sí. Puedes usar Google Fonts en WordPress desde el tema, desde un constructor visual, mediante la biblioteca de fuentes, con un plugin o cargándolas manualmente con código.

¿Cuál es la forma más sencilla de añadir Google Fonts?

La forma más sencilla suele ser usar las opciones del tema o un plugin. Si el tema ya permite elegir fuentes, normalmente es mejor no añadir otro plugin solo para eso.

¿Es recomendable tocar functions.php para añadir fuentes?

Puede hacerse, pero solo si sabes lo que estás haciendo y tienes copia de seguridad. Un error en functions.php puede dejar la web inaccesible.

¿Qué es mejor, cargar Google Fonts desde Google o localmente?

Depende del caso. Cargarlas desde Google puede ser cómodo. Alojarlas localmente da más control, reduce llamadas externas y puede ser interesante por rendimiento y privacidad.

¿Google Fonts puede hacer más lenta una web?

Sí, especialmente si cargas muchas familias, muchos pesos o varias fuentes desde distintos plugins, temas o constructores. Conviene cargar solo lo necesario.

¿Qué significa font-display: swap?

Es una instrucción CSS que permite mostrar primero una fuente alternativa mientras carga la fuente principal. Puede mejorar la percepción de carga, aunque a veces genera un pequeño cambio visual.

¿Puedo usar varias fuentes en una misma web?

Sí, pero conviene no abusar. Para la mayoría de webs basta con una fuente para texto y otra para títulos, o incluso una sola familia bien configurada.

¿Cómo sé si mi web carga fuentes desde Google?

Puedes revisar las herramientas de desarrollador del navegador, en la pestaña de red, y buscar solicitudes a fonts.googleapis.com o fonts.gstatic.com.

¿Las fuentes afectan al SEO?

De forma indirecta pueden afectar si empeoran la velocidad, la experiencia de usuario o la lectura. No se trata de elegir una fuente “para SEO”, sino de cargarla bien y facilitar la lectura.

¿ideaWeb puede revisar las fuentes de mi WordPress?

Sí. Podemos revisar cómo se cargan las fuentes, detectar duplicidades, mejorar rendimiento, ajustar estilos y ordenar la tipografía dentro de un mantenimiento o mejora de WordPress.