Añadir Google Fonts a WordPress SIN plugins

Vamos a ver cómo añadir tipografías de Google Fonts a nuestro sitio WordPress, pero sin utilizar ningún plugin, de esta manera mantendremos nuestra instalación más ligera.

Guía resumen del vídeo:

Añadir código al archivo «functions.php»

Para modificar el archivo «functions.php», debemos estar trabajando sobre un tema hijo, de lo contrario cuando el tema se actualice, perderemos las modificaciones que hayamos hecho.

Después de acceder al archivo functions.php a través del menú Apariencia > Editor de temas, insertaremos al final del mismo, el siguiente código:

function usar_google_fonts() {    
    wp_enqueue_style( ' google_font ', 'SUSTITUR POR ENLACE A LA TIPOGRAFÍA ELEGIDA', false );}

add_action( 'wp_enqueue_scripts', 'usar_google_fonts' );

Ahora solo nos falta elegir la tipografía y añadir el enlace al código que acabamos de incluir.

Obtener enlace de la tipografía en Google Fonts

1. En Google Fonts, elegimos la tipografía deseada y el estilo que queremos utilizar

2. En la pestaña «Embed», dentro del link que nos proporcionan, copiamos el enlace, por ejemplo:

https://fonts.googleapis.com/css2?family=Roboto&display=swap

3. Pegamos el enlace dentro del código de functions.php, sustituyendo el texto «SUSTITUR POR ENLACE A LA TIPOGRAFÍA ELEGIDA».

Asignar la tipografía con CSS

1. Para asignar a un tipo de texto la tipografía que acabamos de instalar, podemos hacerlo desde el menú Personalizar > CSS adicional, en este panel escribiremos el código CSS que necesitemos.

2. Si por ejemplo, queremos aplicar la tipografía a los encabezados de tipo H1, escribiremos en el panel CSS:

h1 {
   font-family: 'Roboto', sans-serif;
}