Como utilizar las fuentes de Google en tu Diseño Web

Recientemente Google a liberado un grupo de fuentes (o letras) bajo una licencia de software libre y totalmente gratuitas para utilizarlas en diseños de sitios y páginas Web.

Aquí te vamos a explicar como utilizar estas fuentes en tus diseños y como sacarles el mayor provecho.

Para este tutoríal se necesita un conocimiento mínimo de HTML.

Vamos a transformar esto:



Fuentes de Google - antes

Antes



A esto:


Fuentes de Google - despues

Después


Utilizando las fuentes Open Source de Google

Puedes descargar los archivos de ejemplo aquí

Un ejemplo Sencillo

Para ver lo fácil que es vamos a empezar con un ejemplo sencillo, vamos a crear dos archivos uno llamado index.html y otro llamado style.css ambos archivos dentro de una misma carpeta. Lo puedes crear con cualquier editor de texto de tu preferencia (evitar utilizar MS Word o OpenOffice ya que le agregan caracteres escondidos que no queremos) puedes utilizar el Block de Notas de Windows o gedit si estás en Linux.

index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Fuentes de Google</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lobster|IM+Fell+DW+Pica|Josefin+Sans+Std+Light">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
 <body>
 <h1>Vensign es lo mejor!</h1>
 <h2>El Supertitulo de hoy</h2>
 <p>Este es un art&iacute;culo en como utilizar las nuevas fuentes de Google&trade; que son Open Source y gratuitas en nuestros dise&ntilde;os</p>
 </body>
</html>

Este archivo sin estilos si lo abren en su navegador se verá algo así:


Fuentes Google - Sin estilo

Sin estilo CSS


No muy atractivo verdad?, vamos a ver que podemos hacer con las fuentes de Google para mejorar un poco el diseño. Primero agregamos estas dos líneas dentro de las etiquetas de

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lobster">
<link rel="stylesheet" type="text/css" href="style.css">

Aquí simplemente estamos agregando dos archivos de estilo CSS a nuestra página:

  • http://fonts.googleapis.com/css?family=Lobster. Con esta línea agregamos la fuente Lobster que es una de las fuentes que tiene disponible Google y la vamos a utilizar para nuestro títulos H1. Así es la forma más básica de agregar una fuente de Google.
  • style.css, es nuestro archivo de estilos que vamos a crear a continuación.

Nuestro archivo index.html quedaría así:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Fuentes de Google</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lobster">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
 <body>
 <h1>Vensign es lo mejor!</h1>
 <h2>El Supertitulo de hoy</h2>
 <p>Este es un art&iacute;culo en como utilizar las nuevas fuentes de Google&trade; que son Open Source y gratuitas en nuestros dise&ntilde;os</p>
 </body>
</html>

Creamos dentro del mismo directorio de index.html un archivo llamado style.css en este archivo agregamos las siguientes líneas:

/*Archivo de ejemplo para utilizar las fuentes de Google
 Autor: Olivers De Abreu
 Compañia: Vensign
 URL : http://www.vensign.com
 Version: 1.0
 */
h1 {
 font-family:'Lobster', arial, serif;
 font-size:48px;
 }

Aquí lo que estamos colocando es que cualquier título h1 que tengamos en nuestra página usará como fuente Lobster y tendrá un tamaño de 48px, noten que utilizamos arial y serif como fuentes de respaldo en caso que ocurra algún problema y no se pueda cargar Lobster. Siempre es importante utilizar fuentes de respaldo!.

Ahora si recargamos nuestra página en el navegador se debería ver así:


Fuentes Google - Fuente Lobster para h1

Con Fuente Lobster para h1


Mucho mejor pero aún le falta, vamos a agregarle otro tipo de fuentes a nuestro título h2 y al párrafo (p). Como hacemos para agregar más fuentes de Google muy sencillo modificamos esta línea en nuestro index.html:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lobster">

Y la cambiamos por esta para agregar las fuentes IM Fell DW Pica para nuestros títulos h2 y Josefin Sans Std Light para nuestro párrafo:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lobster|IM+Fell+DW+Pica|Josefin+Sans+Std+Light">

Noten que hemos separado los nombres de las fuentes con | y que las fuentes que tienen nombres de más de dos palabras unimos las palabras con +.

Ahora modificamos el archivo style.css agregando estas líneas al final

h2 {
 font-family:'IM Fell DW Pica', verdana, serif;
 font-size:40px;
 color:#F25835;
 }
p {
 font-family:'Josefin Sans Std Light', arial, serif;
 font-size:18px;
 }

Aquí como observan estamos utilizando las dos fuentes que agregamos anteriormente, si recargan la página verán algo como:




Con estilo para h1 h2 y p

Mucho mejor!. Aquí ya tenemos toda una página con tres tipos distintos de fuente.

Puedes encontrar toda la lista de fuentes de Google Aquí

Además de colocarles los estilos normalmente como lo hacemos a través de CSS, el API de las Fuentes de Google nos permite definir si las letras son itálicas o en negritas al momento de cargarlas, por si quieres especificar el estilo al momento de cargarla. Este cuadro y ejemplo los tomé de la página de Google.

Estilo Modificador
itálica italic or i
negrita bold o b o un peso numérico como 500
itálica y negrita bolditalic ó bi

Por ejemplo para pedir por una fuente Cantarell itálica y Droid Serif en negrita, utilizaríamos cualquiera de los siguientes URL:

http://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold
http://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:b
http://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:700

Pronto veremos otro tutorial donde le agregaremos estilos a través de una librería de javascript llamada WebFont Loader que nos permite darle efectos como sombras, cargar las fuentes después de cargar la página y otro par de cosas útiles.

Nosotros en Vensign ofrecemos servicios de diseño y desarrollo de páginas Web para PyMES y corporaciones, también ofrecemos servicios de PSD a HTML para diseñadores, puede ver nuestros servicios aquí o Contactarnos


Si quieres recibir más artículos y noticias de diseño y desarrollo Web, Negocios, Software Libre y Linux nos puedes seguir a través de nuestro RSS, Twitter o suscribirte a nuestro Boletín de Noticias

2 comentarios