Usar Google Fonts en WordPress

Cómo usar Google Fonts en WordPress

En esta ocasión vamos a aprender a usar Google Fonts en nuestro WordPress. En alguna ocasión hemos pensado en añadir fuentes a las que ya vienen por defecto en nuestro WordPress, en esta ocasión vamos a ver cómo podemos instalar las fuentes de Google Fonts.

¡Vamos a ello!.

Vincular fuentes de Google Fonts

Entre todas las fuentes que existen en Google Fonts, en este ejemplo vamos a ver cómo se instalan Fira Sans y Raleway, dos fuentes que he usado en mi último proyecto y que me gustan mucho cómo quedan en encabezados y subencabezados.

Lo primero que tenemos que hacer es buscar esas fuentes que queremos añadir a nuestro WordPress, una vez que ya las hemos localizado, simplemente pulsamos el botón rojo que tiene un + (a la derecha del nombre de la fuente)

Añadir la fuente seleccionada
Añadir la fuente seleccionada

Una vez que has añadido la fuente o fuentes deseadas, nos fijamos que estas se cargan en la parte inferior de la pantalla.

Fuentes añadidas a Google Fonts
Fuentes añadidas a Google Fonts

Nos fijamos que esta pantalla nos muestra dos fichas, la ficha EMBED y la ficha CUSTOMIZE, si hacemos clic en CUSTOMIZE, podemos seleccionar variaciones (pesos) de cada tipografía. Pero tenemos que tener en cuenta, que cuantas más variaciones instalemos, más van a tardar en cargar dentro de nuestra página.

En este ejemplo vamos a utilizar las que vienen por defecto, que si te fijas, el tiempo de carga es muy bueno, nos lo indica el cuadro verde de la parte izquierda: Load Time: Fast.

Una vez que tenemos seleccionadas las fuentes, vamos a seleccionar el enlace que nos proporciona Google para poder vincular estas fuentes a nuestro WordPress. En este caso el enlace es este:

<link href=»https://fonts.googleapis.com/css?family=Fira+Sans|Raleway» rel=»stylesheet»>

Cuando ya están vinculadas las fuentes, necesitaremos el código CSS generado para poder decirle a nuestro WordPress qué tipografía vamos a querer utilizar en párrafos, encabezados o cualquier otro texto html de nuestra web.

En nuestro caso, el cósigo CSS es el siguiente:

font-family: ‘Fira Sans’, sans-serif;
font-family: ‘Raleway’, sans-serif;

Nosotros utilizaremos Fira Sans para los encabezados, y Raleway para los subencabezados.

Instalar las fuentes

Si nos fijamos en la imagen superior (o en nuestra ventana de Google Fonts), existen dos métodos para importar o añadir las fuentes seleccionadas a nuestro WordPress: el método STANDARD y el método @IMPORT. Es recomendable utilizar el método STANDARD (que viene por defecto), ya que es más rápido en cargar y da menos problemas. Los dos métodos funcionan igualmente, pero Google recomienda el primer método.

Una vez que ya tenemos claro todo lo dicho anteriormente, copiamos el código para importar nuestras fuentes (el que empieza por <link href=»https://…>) y lo pegamos en la cabecera de nuestra web, entre las etiquetas <head> y </head>.

Para ello tenemos que ir al archivo header.php de nuestro tema o de nuestro child theme, y una vez en este archivo, buscamos la etiqueta </head> y pegamos nuestro código justo antes de esta etiqueta:

Pegar el código para instalar las fuentes de Google Fonts
Pegar el código para instalar las fuentes de Google Fonts

Decirle a nuestro WordPress cuándo vamos a utilizar estas fuentes

Lo último que tenemos que hacer es decirle a nuestro WordPress que cuando hagamos un encabezado, utilizará la tipografía Fira Sans, y cuando tengamos que hacer un subencabezado, utilizará la tipografía Raleway. Esto vamos a hacerlo mediante código CSS.

Para ello vamos al menú Apariencia, Personalizar, nos vamos a CSS Adicional y aquí vamos a crear el CSS necesario. Para ello escribimos lo siguiente:

Crear el CSS para añadir las fuentes
Crear el CSS para añadir las fuentes

Si te das cuenta, yo he añadido Fira Sans para los encabezados de tipo 1 y 2 (los más grandes), y Raleway para el resto de encabezados.

Conclusión

Ya has visto lo sencillo que es instalar fuentes de Google Fonts en tu WordPress. Con este método tan sencillo podrás cambiar el aspecto de todas las fuentes de tu web y hacerla más atractiva.


¿Qué te ha parecido el artículo?. Házmelo saber en los comentarios que tienes más abajo. Estoy deseando leerte.

Por último, si crees que este artículo puede ser interesante para algún amigo tuyo, te agradecería enormemente que lo compartieras con él y con todo el mundo a través de las Redes Sociales.

Puntúa este artículo:
[Total: 0 - Promedio: 0]

Puede que también te interese...

Deja un comentario

Información básica sobre protección de datos
Responsable: Jose González Bueno.
Finalidad: Moderación y publicación de comentarios.
Destinatarios: No se comunican datos a terceros.
Derechos: Tienes derecho a acceder, rectificar, exportar y suprimir tus datos.

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leído y acepto la política de privacidad de este sitio. *