¿Cómo utilizar Google Fonts en tu blog?

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.

¿Cómo utilizar Google Fonts 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.

Cómo instalar fonts de Google 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.

Cómo instalar fonts de Google Fonts

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.

body {
  font-family: 'Amatic SC';
}

Si tienes alguna pregunta sobre cómo utilizar Google Fonts, no dudes en preguntarla en los comentarios.


También te interesaría...

Suscríbete a nuestra lista de correo

Agregue un comentario

Su dirección de correo no se hará público. Los campos requeridos están marcados *


Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.