Nuevas fuentes a través de Google para tu web

Estás aquí: Inicio › Blog › Nuevas fuentes a través de Google para tu web

Google ha anunciado su nuevo API para fuentes, incluyendo un directorio de fuentes y una herramienta para visualizarlas. Esto nos permitirá incluir en nuestra web fuentes diferentes de las tradicionales (las que están incluídas en el directorio de fuentes de Google). La gran ventaja es su facilidad de uso. Símplemente hay que incluir un enlace al CSS de la fuente en Google y luego asignar la fuente al elemento que deseemos desde nuestra hoja de estilos.

Como vemos se trata símplemente de aplicar @font-face, pero con la ventaja de cargar la fuente desde Google, lo cual permite mejorar la velocidad de carga y reducir el consumo de ancho de banda (es como cargar jQuery desde Google).

Vamos con un ejemplo. Elejimos una fuente desde el directorio de fuentes de Google, por ejemplo Josefin Sans Std Light. Vemos que al poner el ratón sobre la misma aparece un botón que dice Click to embed Josefin Sans Std Light. Al hacer click iremos a una página que nos muestra los distintos tamaños y estilos disponibles para la fuente, una descripción y el set de caracteres. Además hay una pestaña que dice Get the Code. Si hacemos click sobre la misma vemos que nos dice que tenemos que pegar dentro del head de nuestra página:

1

<link href='http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light' rel='stylesheet' type='text/css' />

Ojo que la etiqueta en Google viene sin cerrar. Arriba yo la he cerrado para que valide bien la página.

Luego, en nuestra hoja de estilos, si queremos asignar esta fuente a los elementos h1 haríamos:

1

h1 { font-family: 'Josefin Sans Std Light', arial, serif; }

Y eso es todo! Según nos dicen en Google este sistema es compatible con Google Chrome: versión 4.249.4+, Mozilla Firefox: versión: 3.5+, Apple Safari: versión 3.1+ y Microsoft Internet Explorer: versión 6+.
No soportado por iPhone, iPad, iPod, o Android.

Aquí podéis ver la demo. Esperemos que el número de fuentes se vaya incrementando.

Otras lecturas de interés

Anuncio de Google sobre el API de fuentes (en Inglés)
Directorio de fuentes de Google

Sigue a Juan en Twitter, en Google+, o suscríbete al RSS Feed de Emenia para estar al día de nuestros artículos.

Artículos relacionados

• CSS: Especificar line-height con o sin unidades
• Sintaxis de @font-face a prueba de bombas
• Utilizando CSS3 hoy (5): @font-face