Ya abordé en otra ocasión el tema de cómo añadir fuentes de Google Fonts en WordPress. Aquella vez me quedó un artículo que puede pecar de simple, por eso he querido redactar otro que ahonde de manera más profunda en este tema, sin dejarme nada en el tintero. Y es que en aquella ocasión solo comenté la opción de llevarlo a cabo mediante un plugin, pero, como veremos a continuación, hay muchísimas más, cada una con sus pros y sus contras. Habiendo dicho esto, vamos a ver qué es lo mejor a la hora de añadir Google Fonts en WordPress.

Mediante el personalizador de WordPress

Antes que nada, lo ideal es comprobar si tu tema cuenta con soporte para fuentes de Google Fonts. Si es que sí, este es el método más rápido y sencillo de añadir Google Fonts en tu sitio web.

Para ello ve a Apariencia > Personalizar y busca la sección “Fuentes” o “Tipografía” (cada tema puede tener un nombre distinto para esta cuestión). Ya en la sección, indaga las opciones para fuentes que hay disponibles.

Ojo, muchos temas te permiten utilizar Google Fonts, pero también son muchos los que utilizan el paquete básico de la librería o que no te permiten modificar dichas fuentes. Si no puedes personalizar las fuentes, te recomiendo el uso de @font-face (el cual requiere ciertos conocimientos técnicos) o bien instalar un plugin (el cual no requiere conocimientos técnicos pero tiene un peor rendimiento que el @font-face).

Mediante @font-face

Con este método alojaremos las fuentes en nuestro servidor y las llamaremos mediante la regla CSS @font-face. Siempre recomiendo dar un paso más y copiar los archivos a un CDN, lo que se traduce en tiempos de carga más rápidos para nuestros visitantes.

Es decir, si vas a alojar fuentes de manera local, lo más óptimo es utilizar un CDN.

Empecemos con el proceso de cómo realizar todo esto. Lo primero que tienes que hacer es entrar en google-webfonts-helper y seleccionar la fuente que quieras utilizar en tu sitio web. No olvides seleccionar los estilos que quieras aplicar y, cuando lo tengas todo, copia el código CSS que se va a generar (lo ideal es copiar el código de la pestaña “Modern Browsers”).

Más tarde, descárgate la fuente para obtener el archivo zip necesario mediante el botón con el nombre de la fuente + .zip.

Lo siguiente es subir las fuentes a tu servidor, así que conéctate por FTP y vierte el contenido descomprimido del zip que te acabas de descargar en la carpeta /fonts dentro del tema. Si no está creada dicha carpeta, créala tu mismo.

Si por el contrario, vas a utilizar un CDN, obvia el párrafo anterior. Lo más óptimo para ello es que consultes con tu proveedor de CDN para que te índique cuál es la mejor manera de copiar los archivos. Cada CDN es completamente distinto, así que lo suyo es que preguntes.

Por último, nos queda pegar el código que hemos copiado antes en el archivo CSS de nuestro tema. Ojo, muy importante, recuerda modificar el atributo url del código copiado para que apunte al CDN donde copiaste los archivos, o bien a la carpeta /fonts de tu servidor web.

Ahora tenemos dos opciones, o bien insertar el código CSS directamente en el archivo style.css (al inicio del contenido) de tu tema (o child theme), o bien, hacerlo a través del Personalizador (sección CSS Adicional) del back office.

Una vez hayamos seguido todos estos pasos, ya tendremos la fuente de Google Fonts añadida a nuestro sitio web desarrollado con WordPress

Mediante un plugin

Utilizar un plugin es muy buena opción si no tienes nociones de programación web, o simplemente eres nuevo en todo esto. Para ello he compilado una serie de plugins con los que añadir la fuentes de Google Fonts en WordPress es coser y cantar.

• Google Typography (100% RECOMENDADO)
• Easy Google Fonts
• Styleguide – Custom Fonts and Colors
• Google Fonts for WordPress
• TK Google Fonts

¿Entonces por qué me decanto?

Una vez llegado a este punto (espero que no se te haya hecho bola) seguramente te estés preguntando: Muy bien, ¿y cuál de estas opciones elijo?. A ver, como he dicho antes, primero comprueba si tu tema soporta Google Fonts. Si la respuesta es negativa, todo se basa en tus nociones técnicas para con WordPress.

Si ya has “trasteado” con código de WordPress y no te asusta, lo ideal es que te decantes por la opción del @font-face utilizando un CDN. Si por el contrario, a ti todo eso del código y las hojas de estilo te da pavor, lo mejor es que instales algún plugin de los que te hemos listado anteriormente.

Y hasta aquí nuestro artículo sobre qué es lo mejor a la hora de añadir Google Fonts en WordPress. Espero que te haya gustado y, si te ha resultado útil, no dudes en compartirlo en redes sociales. ¡Nos leemos!