Agregar Google Fonts a tu sitio WordPress

¿Por qué usar Google Fonts?

Entra las muchas ventajas que tiene el uso de este servicio, podemos destacar que sus fuentes son libres para uso comercial, son proyectos de código abierto, no presentan problemas de licencia, fáciles de implementar, no hay necesidad de subir las fuentes a nuestro servidor, etcétera…

Agregar Google Fonts

Ya entrando en materia, lo primero que debemos tener claro es cual o cuales fuentes vamos a usar, para este ejemplo vamos a escoger Ubuntu y Roboto.

Una vez escogidas las fuentes, se nos sugiere un código que debemos pegar en el head de nuestra web:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&family=Ubuntu:wght@400;700&display=swap" rel="stylesheet">

Como es lógico, esta no es la manera correcta de hacerlo en WordPress, desde que existe la función wp_register_style().

Si vemos la documentación que se describe para dicha función, necesitamos especificar dos parámetros fundamentales, $handle y $src, pues los demás ($deps, $ver y $media) podemos dejarlos con los valores por defecto.

Entonces en nuestro archivo functions.php agregamos el siguiente código:

function my_theme_enqueue(){
    wp_register_style( 'my-theme-google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto&family=Ubuntu:wght@400;700&display=swap' );
    wp_enqueue_style( 'my-theme-google-fonts' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue' );

El resultado de lo que hemos hecho hasta ahora es que tenemos agregado en el head de nuestra página un código como este:

<link rel='stylesheet' id='my-theme-google-fonts-css'  href='https://fonts.googleapis.com/css2?family=Roboto&family=Ubuntu:wght@400;700&display=swap&;ver=5.8' media='all' />

Pero obviamente esto no coincide con el código original que nos ha propuesto Google Fonts. Entonces, ahora toca hacer las cosas de la manera correcta.

Usar Google Fonts de la manera correcta

Para lograr nuestro objetivo nos auxiliaremos del hook style_loader_tag, el cual acepta cuatro parámetros: $html, $handle, $href y $media.

Entonces, nuevamente vamos a editar nuestro archivo functions.php y escribimos el siguiente código:

function my_theme_preload_styles( $html, $handle, $href, $media ){
    if ( 'my-theme-google-fonts' == $handle ) :
        $html = '<link rel="preconnect" href="https://fonts.googleapis.com">';
        $html .= '<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>';
        $html .= '<link href="'. $href .'" rel="stylesheet" media="'. $media .'">';
    endif;

    return $html;
}
add_filter( 'style_loader_tag',  'my_theme_preload_styles', 10, 4 );

Pongamos atención en que debemos comparar si el parámetro $handle es igual al que definimos en la función my_theme_enqueue(), en este caso my-theme-google-fonts.

Este filtro o hook se encarga de construir el html que necesitamos imprimir en el head de nuestra página, y en efecto, si ahora revisamos el código fuente del sitio veremos que coincide con el código que nos ha propuesto Google Fonts.

Atributo `rel="preconnect"`

No quiero terminar sin antes destacar el uso de <link rel="preconnect">, por eso y dejando claro que no soy un experto en la materia, prefiero dejarles algunos enlaces que explican de manera detallada todo lo referente a este tema:

Concluciones

Hasta aquí hemos visto cómo agregar Google Fonts a nuestro sitio hecho con WordPress. También vimos que podemos modificar la salida de la función wp_register_style() mediante el hook style_loader_tag.

También he creado un gist en GitHub que pueden clonar y trabajar con más facilidad.

Espero como siempre que les sirva de ayuda y podamos entre todos ampliar nuestros conocimientos.

¿Por qué usar Google Fonts?