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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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).

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.

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.

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;
} );

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.

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.

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.