Cómo añadir fuentes de Google Fonts en WordPress y con el tema GeneratePress

Última actualización :
author kinese
Escrito por Kinese

Apasionado por el SEO y WordPress, quiero compartir mis conocimientos y especialmente el tema GeneratePress. Si necesitas ayuda, puedes ponerte en contacto conmigo.

En este tutorial, te mostraré cómo añadir una fuente de Google Fonts en WordPress para que se carga desde tu servidor en lugar de hacerlo desde fuentes externas. Eso es una optimización para la carga de las fuentes y el segundo paso será la precarga de las fuentes de Google Fonts.

Google Fonts es una biblioteca con más de 1000 fuentes que se pueden utilizar en tu sitio web de forma gratuita. Es administrado por Google y servido desde el dominio fonts.gstatic.com.

Para que tu página web se vea más profesional, puedes elegir cualquiera de estas fuentes con licencia gratuita. Sin embargo, el uso de demasiadas tipografías de Google puede resultar en una multitud de solicitudes externas a los servidores de Google, lo que ralentiza tu sitio web.

¿Por qué deberías alojar Google Fonts en tu servidor?

La principal razón por la que querrías alojar las fuentes de Google en local es por la velocidad de carga. Cuando se alojan localmente, el navegador del usuario no tiene que hacer el recorrido de ida y vuelta desde los servidores de Google para recuperar los archivos adecuados.

También tienes el control total del tiempo de caducidad de los archivos. Esto, por su parte, elimina el aviso de Leverage Browser Caching en los sitios que miden las métricas de rendimiento como GTMetrix, PageSpeed Insights y Pingdom.

Todo esto hará que cargues menos peticiones HTTP y también que te posiciones más alto en las páginas de resultados de Google (SERP) ya que la velocidad es un factor de SEO.

Mejorar SEO Semrush

seo tools semrush

La forma correcta de usar Google Fonts en WordPress

Las Fonts vienen de dos fuentes externas, fonts.googleapis.com y fonts.gstatic.com. En mi página web, uso una tipografía, se llama Roboto.

La captura de pantalla que aparece a continuación es un Waterfall chart (Gráfico de cascada) generado por GTMetrix donde las fuentes de Google están generando 3 peticiones externas.

rendimiento en gtmetrix con google fonts

La siguiente captura de pantalla es el mismo gráfico de cascada de GTMetrix pero después de haber alojado las fuentes de Google localmente en WordPress.

rendimiento gtmetrix con fuentes de google alojada en wordpress

Eliminé 2 peticiones HTTP y así bajé el tiempo de carga de mi página web.

Hay dos métodos que se pueden implementar para agregar Google Fonts en tu WordPress, manualmente en tu cPanel o con un plugin.

Aunque alojar las fuentes de Google en local eliminará las peticiones externas, tu sitio web todavía necesita solicitarlas desde tu propio servidor. Así que intenta usar menos fuente de Google, para reducir el número de familias de Google Fonts utilizadas en tu sitio web. Y menos Font Weights, también para reducir el número de peticiones.

Agregar Google Fonts en tu WordPress con un plugin

Este método es más fácil si no quieres interferir con el codigo de tu tema y otras cosas.

Este plugin te permite buscar la tipografía que quieres utilizar en tu página web y genera automáticamente una hoja de estilos para añadirla en el código de tu tema.

El plugin OMGF (Optimize My Google Fonts) fue escrito específicamente para aumentar el rendimiento y mejorar la experiencia del usuario.

Está lleno de características, incluyendo:

  • Puedes buscar y encontrar fácilmente fuentes de Google
  • La hoja de estilos es autogenerada y se añade automáticamente a tu encabezado
  • Compatible con los populares plugins de Caching y Seguridad: WP Fastest Cache, Autoptimize y WordFence.
  • Capacidad de controlar el rendimiento de las fuentes
  • Priorizar las fuentes con rel=’preload’.

Este plugin es en realidad muy sencillo. Sin embargo, vamos a hacer un resumen rápido de todos modos para que puedas ver cómo funciona.

Instalar y activar OMGF

Así que vamos a empezar el proceso. Para alojar fácilmente las fuentes de Google en WordPress, necesitas instalar y activar el plugin OMGF.

plugin omgf para añadir google fonts en wordpress

Una vez que el plugin ha sido instalado y activado, haz clic en Ajustes > Optimize Google Fonts (1).

Configurar OMGF

Te llevará a la página de configuración del plugin dónde podrás configurarlo y empezar a agregar las fuentes de Google en tu servidor.

configuracion de la hoja de estilos para google fonts

Busca la fuente de Google que quieras utilizando la opción Search (2) en la sección Generar la hoja de estilos. Puedes buscar y elegir una entre todas las fuentes de Google disponibles.

Luego tu tipografía aparecerá debajo de Available subsets. Como hispanohablante, el valor latín es suficiente entonces haz clic en la lupa (3).

Todos los estilos de este tipo de tipografía aparecerán debajo Available font styles.

agregar google fonts en wordpress

Elige los Font Weights que quieras marcando la casilla y borra los que no vayas a usar haciendo clic en la cruceta a la derecha de la casilla. 

En este ejemplo continuaré con el Font Weight Regular que es el número 400, una vez seleccionado, haz clic en Apply (1).

Todos desaparecerán y sólo te quedarás el estilo elegido, en ese momento pincha Download Fonts (2).

Cuando la descarga se termina, haz clic en Generar la hoja de estilos (3). Se generará automáticamente una hoja de estilos y se añadirá al encabezado de tu tema.

Por último, en la pantalla Ajustes avanzados, marca la casilla Eliminar automáticamente. Esto eliminará cualquier solicitud de hojas de estilos de Google Fonts alojadas externamente.

eliminar google fonts externas con el plugin omgf

Finalmente, puedes ir a Apariencia > Personalizar en tu herramienta de WordPress para elegir la tipografía que has descargado.

No olvides vaciar la caché y luego puedes comprobar tu página web en GTmetrix y ver el resultado.

Añadir Google Fonts en WordPress sin plugin

Antes de continuar con este método, haz una copia de seguridad de tu sitio web. Aunque no vamos a cambiar o eliminar nada, sólo añadir archivos, prefiero avisarte por seguridad. Puedes usar un plugin como Updraft o hacerlo a mano.

Puedes seguir estos pasos para agregar Google Fonts en cualquier tema de WordPress, excepto el último paso que puede diferir, pero te lo explicaré con más detalle luego.

En este ejemplo estoy usando el tema GeneratePress. Es un tema gratuito y ligero que puede ser ampliado mediante la instalación de un plugin Premium que permite añadir muchas características y funciones. Es un tema receptivo personalizable y bien codificado construido con un enfoque en la velocidad y la usabilidad.

Después de terminar este tutorial, te recomiendo que sigas con la precarga de las fuentes de Google Fonts para optimizar aún más tu página web.

Descargar el archivo de la fuente Google Fonts

Para empezar, tendrás que descargar el archivo de la fuente que quieras usar. Para descargar una, esta herramienta es buenísima. En la parte superior izquierda, busca la tipografía que quieres descargar, Roboto por ejemplo.

buscar la tipografia de google roboto

Una vez buscada, tienes que elegir las propriedades font-weights que usarás en tu página web. No obstante, recomiendo elegir solamente el número mínimo de font-weights necesarias, nunca se usan todas.

Y como hispanohablante, la opción latin por defecto en Select charsets es suficiente.

Vamos a seguir con el font-weight 400 que es el regular.

hoja de estilos para fuentes de google roboto

Sólo marca la casilla regular y descarga tu fuente de Google en la sección número 4 un poco más abajo. Dejamos de lado la sección 3 por el momento porque se trata del CSS y nos falta un valor para continuar.

Entonces haz clic en el botón azul roboto-v20-latin.zip para descargar el archivo .ZIP en tu computador.

descargar google fonts

Subir los archivos Google Fonts en tu servidor

Toma este archivo y súbelo a tu servidor usando el Administrador de Archivos en cPanel.

Si has olvidado cómo acceder a tu cPanel, no te preocupes, es posible acceder directamente a través de tu proveedor de alojamiento. Eso es lo que hago cada vez, mi proveedor es Webempresa entonces inicio sesión en mi cuenta y hago clic en el enlace que me lleva directamente a la interfaz de cPanel al estar conectado.

alojamiento wordpress webempresa

servidor wordpress webempresa

ajustes en cpanel

Para que tus archivos de Google Fonts sean fáciles de encontrar, puedes añadirlos en una carpeta llamada fonts. Para este ejemplo, he creado esta carpeta dentro de la carpeta uploads.

Sigue los siguientes pasos.

Una vez en el Administrador de Archivos de tu página web, en public_html (1) haz clic en tudominio.com (2) luego en wp-content (3) y en uploads (4). Para crear una nueva carpeta haz clic en +Carpeta (5) y dale un nombre fonts (6).

agregar fuentes de google en wordpress con cpanel

Una vez en esta nueva carpeta, haz clic en Cargar (7) para subir el archivo .ZIP con la fuente de Google que has descargado previamente.

De vuelta en esta carpeta ahora aparecerá el archivo roboto-v20-latin.zip, haz clic con el botón derecho del ratón sobre él y luego haz clic en Extract (8) para extraer los archivos de fuentes y poder usarlos en tu sitio web.

Ahora el Google Font está alojado en tu servidor, podemos seguir con el proceso.

Añadir CSS para Font Face

Una vez que hayas subido los archivos de tu fuente a tu servidor, tienes que incluir esas fuentes en el CSS de tu sitio usando @font-face.

¿Te acuerdas de la tercera parte que pasamos? Es hora de volver a esta página web para obtener el CSS.

En Customize folder prefix tienes que escribir la URL desde la que se cargarán tus fuentes. Si has hecho exactamente lo mismo que yo, esta dirección es https://www.tudominio.com/wp-content/uploads/fonts/.

Solo tienes que cambiar el www.tudominio.com por tu dominio a ti. Si no hiciste la misma cosa, reemplaza la URL con la URL real del archivo relevante en tu servidor.

css font face para google fonts

Entonces puedes copiar el CSS presente en la caja que se verá así (no olvides cambiar tu dominio):

/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://www.tudominio.com/wp-content/uploads/fonts/roboto-v20-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Roboto'), local('Roboto-Regular'),
       url('https://www.tudominio.com/wp-content/uploads/fonts/roboto-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://www.tudominio.com/wp-content/uploads/fonts/roboto-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://www.tudominio.com/wp-content/uploads/fonts/roboto-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('https://www.tudominio.com/wp-content/uploads/fonts/roboto-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('https://www.tudominio.com/wp-content/uploads/fonts/roboto-v20-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

Y pegar este código en tu tema. Para hacerlo, puedes usar la pestaña de CSS adicional en Personalizar de tu WordPress: Apariencia > Personalizar > CSS adicional.

una diferencia entre mi código y el código del sitio, añadí una propiedad: font-display: swap;. Ayuda a intercambiar la fuente con las fuentes del sistema antes y después de cargar la página web. Lo que ayuda a obtener una mayor puntuación en Google PageSpeed Insights.

Agregar Google Fonts a tu tema

En este ejemplo con GeneratePress, asegúrate de que el módulo de Tipografía está activo, ve a Apariencia > GeneratePress > Módulos > Typography > Activar.

Para este último paso todo depende del tema. Aunque para la mayoría de ellos es suficiente añadir una función PHP al código, esta función no se escribirá igual para todos los temas.

Pero no te preocupes, no hay nada complicado con este código PHP.

En primer lugar, instala el plugin Code Snippets, que permite añadir funciones sin tocar los archivos del tema. También puedes usar un child theme pero para que sea más fácil usaré el método con Code Snippets.

plugin code snippets para agregar fuentes de google en wordpress

Una vez que el plugin está activo, Ve en la barra lateral a Fragmentos de código > Añadir nuevo, escribe un título luego pega el siguiente código y actívalo.

add_filter( 'generate_typography_default_fonts', function( $fonts ) {
    $fonts[] = 'Roboto';

    return $fonts;
} );
funcion php para agregar google fonts en wordpress

Para terminar, sólo tienes que seleccionar en las opciones de personalización del tema la tipografía que acabas de añadir para que aparezca en tu página web.

Ve a Apariencia > Personalizar > Tipografía y encuentra tu fuente, selecciónala en Fuentes del Sistema y pulsa Publicar.

En esas opciones define dónde quieres usar las fuentes: título, cuerpo, widget, etc.

personalizar tipografia del tema wordpress

Evitar que el tema cargue fuentes externas de Google Fonts

Para evitar cargar fuentes externas de Google Fonts que no se usarán de todos modos, puedes ir a la ventana Extra del plugin Autoptimize para marcar la casilla Eliminar las Google Fonts.

Existen otros plugins de optimización con esta opción, pero uso Autoptimize así que será mi ejemplo.

No olvides vaciar la caché y luego puedes comprobar tu página web en GTmetrix y ver el resultado.

eliminar fuentes de google externas con el plugin autoptimize

Conclusión

Cuando alojas las fuentes de Google en tu servidor, le da a tu sitio muchas ventajas. De todas estas ventajas, la velocidad de carga y la optimización son las más importantes.

Espero que hayas encontrado útil este artículo y si te gustó no dudes en compartirlo en las redes sociales. Y si tienes alguna pregunta, pregúntame en los comentarios.

Artículos relacionados

4 comentarios en «Cómo añadir fuentes de Google Fonts en WordPress y con el tema GeneratePress»

  1. ¡Hola!
    Enhorabuena por este tutorial, es el mejor que he visto sobre esto y he mirado mucho por ahí.

    Me queda una duda, yo uso el tema ShowCase de Genesis y no quiero cambiar la fuente (me gusta pero usa las de Google Fonts), lo que quiero es servirlas desde mi servidor.
    Mi duda es: ¿cómo indico que las fuentes que se carguen sean las del hosting y no las de Google Fonts? ¿Debo indicar algo extra en functions.php o en otro sitio?
    Gracias 🙂

    Responder

Deja un comentario