¿Cómo utilizar Google Fonts en tu blog?

Publicado el 23 Junio, 2017, en: Artículos, Páginas Web, Tutoriales HTML & CSS, Wordpress ?>

Google Fonts es uno de los mejores recursos que brinda Google para los usuarios. Te permite utilizar fuentes en tus blogs o páginas web de manera sencilla y rápida. Lo mejor de todo es que Google Fonts tiene una base de datos enorme de fuentes para todos los gustos. Sigue leyendo para aprender cómo utilizarlas en tu blog.

Paso #1: Buscar una fuente de Google fonts

Vamos a dirigirnos a la página de Google Fonts y utilizar los filtros de búsqueda para encontrar la font o fuente indicada.

Cada fuente/font tiene su propio recuadro de previsualización, el cual tiene distintas opciones:

#1 Texto: Esta opción te permite elegir qué texto quieres visualizar como ejemplo. Las opciones son: oración, párrafo, abecedario, números, personalizado. En la opción personalizada puedes ingresar el texto que quieras.
#2 Grosor: Aquí puedes elegir el grosor o ‘font weight’ de la fuente, como por ejemplo regular (400), bold (600), entre otros. Esto dependerá de cada fuente.
#3 Tamaño: Esta opción te permite elegir el tamaño de la fuente para la previsualización.
#4 Aplicar a todas las fuentes: Esta opción te permite aplicar las opciones elegidas a todas las fuentes para su previsualización.
#5 Detalle: Este botón te permite ver a mayor detalle cada fuente, como información acerca del diseñador y más.
#6 Seleccionar: Este botón te permite seleccionar la fuente para agregarla a tus fonts a instalar.

Paso #2: Seleccionar una fuente de Google fonts

Cuando hayamos encontrado la fuente que estamos buscando, le damos click al botón de ‘Seleccionar Fuente’. No te olvides que puedes agregar más de una fuente a tu lista para poder instalarlas en conjunto.

En la parte de abajo, aparecerá una pestaña negra y le daremos click. La ventana muestra tu selección de fuentes y sus métodos de instalación. Una de las cosas que debes tener en cuenta es el ‘Load Time’. Si es que cargas muchas fuentes, tu blog o web cargará más lento, porque se demorará más en hacer la llamada a las fonts.

En la pestaña Customize, encontrarás cada font y su grosor. Ahí deberás marcar qué grosores quieres que se instalen. Recuerda que mientras más grosores, tu ‘Load Time’ será más lento.

Paso #3: Instalar en tu blog o web

Google Fonts te facilita la instalación de las fuentes en tu blog o web, brindándote dos métodos muy sencillos. Aquí te explicaremos ambos métodos:

Método #1: Elemento Link en `<head>`

Para este método, debes tener acceso a tu código fuente. El código que insertaremos, lo vamos a copiar de la pestaña Embed de Google Fonts. Debería ser parecido a este:

<link href='https://fonts.googleapis.com/css?family=Amatic+SC|Patrick+Hand+SC' rel='stylesheet'>

Debes ubicar la cabecera de tu código, en donde esten los elementos , e insertar el código de Google Fonts dentro. Tenemos el siguiente ejemplo, donde se ha añadido el código de Google Fonts para la fuente Amatic SC y Patrick Hand SC.

<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8 />
  <title>Título</title>
  <link href='https://fonts.googleapis.com/css?family=Amatic+SC|Patrick+Hand+SC' rel='stylesheet'>
</head>

Método #2: Import en CSS

Para este método, debes tener acceso a tu código CSS. El código que insertaremos, lo vamos a copiar de la pestaña Embed de Google Fonts, en el apartado de @Import. El código debería ser parecido a este:

@import url('https://fonts.googleapis.com/css?family=Amatic+SC|Patrick+Hand+SC');

Debes abrir tu archivo de CSS e insertar el código en la parte inicial del código.

¿Cómo instalar Google Fonts para un blog en WordPress?

Si tienes un blog con WordPress instalado, entonces te recomiendo que instales las Google Fonts de la siguiente manera. Debes tener acceso al archivo functions.php de tu tema, y simplemente agregar el siguiente código.

function rgd_agregar_google_fonts() {
wp_enqueue_style( 'rgd_google_fonts', 'https://fonts.googleapis.com/css?family=Amatic+SC|Patrick+Hand+SC', false ); 
}
add_action( 'wp_enqueue_scripts', 'rgd_agregar_google_fonts' );

Paso #4: Utilizar tus nuevas Fonts

Para poder utilizar tu nueva font instalada, lo único que debes hacer es abrir tu archivo de CSS, e insertar la font al elemento que desees. En el siguiente ejemplo, hemos aplicado la fuente ‘Amatic SC’ en todo el elemento body.