¿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
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.
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.
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;
}
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.
Artículos Relacionados
(3 votos, promedio: 5,00 de 5)
Cargando...
No me funciona
Te sugiero revisar el video cuidadosamente, si no te funciona entonces tu theme debe tener algunas clases CSS que sobreescriben o que tienen prioridad sobre las que estas usando. Podrías probar agregando !important al código CSS.
Gracias, me ha servido. Al principio tenía problemas, pero es debido a que estoy diseñando en local y hay que bajar las tipografías a tu ordenador para que funcione.
muchas Gracias…
Hola Jhon, gracias por el tutorial excelente.
Pero como haría para poner fuentes descargadas ¡Se usa el mismo código oh ! hay otra forma de hacerlo
Gracias
Hola, sería mejor que evites usar archivos de fuentes descargadas, la idea de usar fuentes de Google es que varios lo usan y ya esta en la cache del navegador, sin embargo si quieres usar tus propias fuentes que tienes en archivos tendrías que referenciarlas por CSS, busca la documentación de @font-face