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 incluidas en el directorio de fuentes de Google). La gran ventaja es su facilidad de uso. Simplemente 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 simplemente 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. Elegimos 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:

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:

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

2 comentarios en “Nuevas fuentes a través de Google para tu web

  1. Hola
    he usado las fuentes de google en una web que estoy realizando pero mi cliente no las ve en IE (creo que tiene la versión 7 u 8 )
    Cómo se puede, si se puede, corregir eso?
    Gracias (sumamente útil tu web e impecable)

Deja un comentario

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

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