Agregar Google Fonts en WordPress sin usar plugins

[ 30 mayo 2018 ] [ Autor: Jhon Marreros Guzmán ] [ Themes - Intermedio] [ ]

¿Tienes un theme en el cual te gustaría añadir un tipo de letra adicional?, pero es posible que quieras evitar el uso de plugins adicionales y mantener tu sitio lo más liviano posible, en este artículo aprenderás cómo agregar Google Fonts en WordPress sin usar plugins de manera simple.

1- Seleccionando las Fuentes a usar

Lo primero que tienes que hacer es ir al sitio de Google Fonts y seleccionar los tipo de letra que quieres añadir a tu sitio web.

Cuando añades una familia de fuente puedes ver la fuente añadida en la parte inferior, al desplegar verás el detalle, tal como se ve en la siguiente imagen.

Puedes personalizar la fuente añadiendo variaciones, tal como se ve en la siguiente imagen

Seleccion de variaciones de fuente, normal y bold

Te sugiero no elegir muchas variaciones ya que esto implica cargar archivos adicionales para el tipo de letra seleccionado.

Además puedes agregar más de una familia o fuente, tal como se ve en la siguiente imagen en donde se añadió la fuente Roboto y Ubuntu.

Pantalla de detalle para incluír varias fuentes

Trata de no añadir más de 2 tipos de letras, una para títulos y otra para párrafos es lo ideal, cargar muchas fuentes impacta en la carga de archivos adicionales que pueden ralentizar la carga de tu sitio.

2- Agregando archivo de estilos externo

En nuestro ejemplo anterior Google nos ha generado el siguiente código

<link href="https://fonts.googleapis.com/css?family=Roboto:400,700|Ubuntu:500,700" rel="stylesheet">

De este código sólo necesitamos la url con sus parámetros, es decir esta url:

https://fonts.googleapis.com/css?family=Roboto:400,700|Ubuntu:500,700

Luego en tu archivo functions.php de tu theme puedes agregar el siguiente código:


add_action("wp_enqueue_scripts", "dcms_insertar_google_fonts");

function dcms_insertar_google_fonts(){
    $url = "https://fonts.googleapis.com/css?family=Roboto:400,700|Ubuntu:500,700";
    wp_enqueue_style('google_fonts', $url);
 }

Lo que hace este código es registrar un nuevo archivo de estilos externo que es el que tiene la información para cargar la fuentes de Google que hemos configurado.

Mejor si usas un child theme para agregar este código:

Te sugiero revisar si el código se agregó correctamente revisando el código HTML generado en el front-end de tu sitio.

3- Modificaciones CSS

Ya incluiste el tipo de letra, ahora la puedes usar en tu sitio, esto a través de CSS.
Google también te proporciona las reglas CSS que puedes usar:

font-family: 'Roboto', sans-serif;
font-family: 'Ubuntu', sans-serif;

Sin embargo para asignar esto a tu theme tienes que incluirlas dentro de una clase CSS, por ejemplo:


.entry-title{
	font-family: 'Ubuntu', sans-serif;
}

.entry-content{
	font-family: 'Lato', sans-serif;
}

Puedes agregar este código al final de tu archivo style.css, mejor si usas un child theme.

Para detectar las secciones a las cuales quieres cambiar el tipo de letra, te sugiero revisar el artículo que explica Cómo usar el Inspector de código para modificar un theme WordPress.

Conclusión

Google Fonts es un servicio que te permitirá incluir tipos de letras adicionales a tu sitio web, hay muchos plugins que te permiten realizar esto, pero si quieres mantener tu sitio liviano y no complicarte con la administración de plugins adicionales, puedes agregar las fuentes que necesites manualmente tal como has visto en este artículo.

Aún con dudas, en el siguiente video se detalla los puntos anteriores.