Usar las Google Fonts en tu theme de WordPress

Recientemente estuve rediseñando una web sobre WordPress  y  me vi en la necesidad de sacar jugosa partida de las tipografías de Google. Lo interesante de esto es que no quería utilizar el plugin WP Google Fonts para no afectar el tiempo de carga de la página; así que decidí hacerlo manualmente.

La verdad es que es muy sencillo, nos centraremos en dos archivos de nuestro theme: header.php y style.css

1. Abrimos header.php y antes del cierre de <head> añadimos lo siguiente:

<link href='http://fonts.googleapis.com/css?family=Raleway|Ubuntu|Cuprum|Lato|Asap|Telex:300,400,500,600' rel='stylesheet' type='text/css'>

Donde : Ralaway|Upon|Cuprum|Lato|Asap|Telex   –> son algunas de las diferentes tipografías de Google Fonts y después de los dos puntos (:) agregamos las diferentes variaciones en que las utilizaremos, por ejemplo, yo utilizo 400,500 y 600.

Para finalizar este paso guardamos la modificación del archivo header.php

 

 

2. Abrimos style.css para integrar las fuentes y añadimos lo siguiente:

body {
font-family: 'Cuprum',sans-serif;
color: #FFFFFF;
font-size: 13px;
font-weight: 400;
line-height: 13px;
text-decoration: none;
}

Puedes utilizar las fuentes dentro de los títulos de post, títulos de widgets, títulos de página o texto en general de tu web. Para hacer estas variaciones solo es necesario que busques un poco dentro del código de tu hoja de estilo (style.css), por ejemplo:

#primary-menu ul li a {
font-family: 'Telex',sans-serif;
color: #FFFFFF;
display: inline-block;
padding: 18px 0 17px 0;
margin: 0 0 0 0;
font-size: 14px;
font-weight: 400;
line-height: 14px;
text-transform: uppercase;
text-decoration: none;
}

En este ejemplo, usamos la tipografía Telex para el menú primario, y ademas agregamos el atributo uppercase para que todo el texto sea en mayúsculas.

Espero que les sea útil este post 🙂

Milenial amante de la fotografía, los viajes y del amor · LCC · Colaboro donando fotografías en Pixabay y Unsplash.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

subir