WordPress: Cómo añadir Google Fonts

¡Buenos días! Hoy vamos a ver cómo añadir Google Fonts a nuestra web en WordPress para diseñarla a nuestro gusto. ¡Vamos allá!

YouTube video

Seguiremos estos pasos:

1. Accedemos al archivo functions.php en el directorio de nuestro tema o a nuestro plugin de snippets.

2. Creamos un snippet y pegamos el siguiente código:

function bps_enqueue_font() { 
wp_enqueue_style('', '', array());}

add_action( 'wp_enqueue_scripts', 'bps_enqueue_font' );

Ahora deberemos rellenar la información que falta en este código. Para hacerlo seguimos estos pasos:

3. Vamos a Google Fonts y seleccionamos la fuente que nos interesa dándole al boton +.

4. Abrimos la pestaña de las fuentes seleccionadas abajo a la derecha (Family Selected) y copiamos la URL de la fuente. Por ejemplo esta:
https://fonts.googleapis.com/css?family=Kurale

5. Insertamos esta información entre las segundas comillas vacías del snippet.

6. Entre las primeras comillas le asignamos un nombre al archivo de la fuente, por ejemplo google-font-kurale en este caso, y guardamos. El resultado sería este:

function bps_enqueue_font() { 
wp_enqueue_style('google-font-kurale', 'https://fonts.googleapis.com/css?family=Kurale', array());}

add_action( 'wp_enqueue_scripts', 'bps_enqueue_font' );

7. Volvemos a Google Fonts y copiamos la línea de CSS que nos sugiere para la fuente, como esta: font-family: ‘Kurale’, serif;

8. Accedemos al archivo style.css de nuestro tema y utilizamos este comando CSS para asignarle la fuente a los elementos que queramos como en el ejemplo del vídeo.

¡Ya está! Ahora nuestra web carga la fuente desde Google Fonts y podemos utilizarla para nuestro diseño.

¿Eres una agencia o diseñador y necesitas un servicio profesional de maquetación web?
Tu web maquetada pixel-perfect en tiempo record con las mejores prácticas de desarrollo y optimización de velocidad
Servicio maquetación web