Cómo incluir Google Fonts localmente en WordPress

Google Fonts es uno de los servicios más utilizados para cargar tipografías en WordPress. Sin embargo, hacerlo mediante llamadas externas puede afectar al rendimiento y a la privacidad. En esta guía aprenderás a incluir Google Fonts localmente en WordPress paso a paso.
Veremos también cómo incluirlas sea cual sea su procedencia, por ejemplo desde ‘Font Squirre‘ o ‘1001fonst‘.

Guía actualizada en 2026. Este tutorial sobre cómo incluir localmente las fuentes de Google Fonts ha sido revisado y optimizado para las versiones actuales de WordPress. Los ejemplos de código, estructura de carpetas reflejan las mejores prácticas vigentes en 2026.

En este tutorial aprenderás a incluir Google Fonts localmente en WordPress para mejorar el rendimiento de tu sitio y reducir las peticiones externas.

¿Por qué alojar Google Fonts localmente?

Principalmente por dos motivos, cuando hacemos peticiones a Google Fonts, este no respeta en su totalidad la ley RGDP imperante para todos los países de Unión Europea, además, al tener que hacer el servidor peticiones a Google el tiempo de respuesta es mayor y la carga de la web en el navegador aumenta, solo por los motivos mencionados anteriormente ya es suficiente para alojar las fuentes en modo local en nuestros proyectos.

Paso 1. Descargar Google Fonts

Principalmente por dos motivos.

El primero es la privacidad y el cumplimiento del RGPD. Cuando realizamos peticiones a Google Fonts, parte de la información puede enviarse a servidores externos, lo que ha generado diversas consideraciones legales en Europa.

El segundo motivo es el rendimiento. Al alojar las fuentes localmente se eliminan peticiones adicionales a Google, reduciendo el tiempo de carga y mejorando la experiencia del usuario.

Solo por estos dos motivos ya merece la pena alojar las fuentes de forma local en nuestros proyectos.

Google Fonts nos facilita la herramienta Google Webfonts Herper, donde nos da casi todo el trabajo hecho.

Al acceder a esta web vemos un panel izquierdo donde podemos buscar la fuente que deseemos haciendo scroll o simplemente ponemos en la casilla superior el nombre de la fuente.

Vamos a buscar la fuente ‘moderna de Playwrite IT’.

Tenemos que marcar ‘latin’ y ‘latin-ext’, al hacerlo se regenera la página y nos aparece el código necesario para que las incluyamos en nuestro fichero de estilos, copiamos y pegamos.

Si tu web es exclusivamente en español no hace falta marcar ‘latin’ y ‘latin-ext’.

Para pegar este código dentro de tu fichero de estilos debes de subirlos a tu servidor, el procedimiento depende de si tienes CPanel o WebPanel, si no tienes muy claro como hacerlo seguro que por la Red encuentras tutoriales donde te explican el procedimiento de subir ficheros a tu servidor.

Más abajo en la misma página nos aparece un botón para que nos descarguemos los ficheros de las fuentes, este fichero está en formato .zip, una vez tenga el fichero en tu servidor deberías colocarlo dentro de la carpeta ‘fonts’ o bien crear una carpeta con el nombre de la fuente, si es posible créala dentro de la carpeta ‘assets’ de tu proyecto. Tienes que descomprimir el fichero y veras algo así:

Una vez los ficheros y el código .css en tu servidor tendrás que modificar la o las urls que apuntan a esos ficheros, y ya tienes las fuentes disponibles para su uso, entiéndase que el código css debe de estar dentro de el ‘style.css’ del proyecto, tendrás que buscar todas las coincidencias de ‘font-family’ y colocar la nueva fuente.

Al modificar la url me refiero a esto:

El procedimiento parece algo laborioso, pero una vez nos acostumbremos a ello no lo será tanto.

Paso 2. Agregar fuentes que no sean de Google Fonts.

Ya se dijo al principio de esta entrada que existen muchos sitios que nos facilitan fuentes tanto gratuitas como de pago, vamos a ver como utilizar las fuentes de ‘Font Squirrel‘.

Una vez en la web elegimos la fuente de deseemos, elijamos para esta prueba una fuente algo llamativa, por ejemplo la ‘kaushan Script’.

Nos la descargamos mediante el botón ‘DOWNLOAD OTF’, nos genera un formato .zip que al descomprimir vemos algo así:

Como puedes ver tenemos el fichero de la fuente en formato .otf y el fichero licencia.

Ya se dijo más arriba que los formatos validos para la web debe ser .woff2, tendremos que convertir el formato que recibimos a esos formatos.

Font Squirrel nos facilita una herramienta para hacer esos cambios:

Hacemos click en el botón ‘UPLOAD FONTS’ localizamos el fichero que nos hemos descargado, es decir, el fichero ‘KaushanScript-Regular.otf’ y lo seleccionamos.

Hacemos click en el botón ‘DOWNLOAD YOUT KIT’ y se nos descarga el fichero ‘webfontkit.zip’
Al descomprimirlo tenemos algo así:

Solo nos interesa los ficheros .wotf2 y el .css, estos dos fichero tenemos que subirlos a nuestro servidor.

Los archivos de la fuente ya se dijo anteriormente donde se deben de colocar, con respecto al fichero .css que contiene el código necesario para llamar a esos ficheros se debe de colocar dentro del fichero de estilos de tu proyecto. Este fichero .css contiene:

Comprueba que todo a ido bien, si no es el caso, revisa la ruta donde está alojado los ficheros.

En la Red encontraras otros conversores de .otf o .ttf a .woff. y woff2. Recomiendo transfonter por su claridad y rapidez.

Como has visto, incluir Google Fonts localmente en WordPress es una forma sencilla de mejorar el rendimiento de tu web y reducir las dependencias externas. Aunque requiere unos pasos adicionales respecto al método tradicional, tendrás un mayor control sobre las tipografías utilizadas y una mejor optimización de la carga.

Puedes ampliar conocimientos visitando

Google Fonts
Google Fonts Developer API
Font Squirrel
Documentación de fuentes web de MDN

También te puede interesar

Salir del blog