Google Font API: Usa tipografías open source en la web

Cada vez salen más y más APIs, y Google es uno de los qué más APIs libera. Esta vez ha presentado en las conferencias Google I/O, realizadas el pasado 19 y 20 de Mayo, la Google Font API. Esta API te ayuda a añadir tipografías en cualquier página web. Esto tiene unos beficios claros como:

• Disponer de tipografías de código abierto de alta calidad
• Funciona en la mayoría de los navegadores
• Es extremadamente facil de usar.

Puedes ver todas las tipografías disponibles en el Directorio de Tipografías de Google. De momento disponen de 18 fuentes, con variantes en itálica, negrita, italica negrita. Además 1 de ellas dispone de 10 familias diferentes. Por lo tanto contamos con un catálogo amplio que nos permitirá dar otro estilo a nuestra web y salirnos de las típicas tipografías universales.

Además el catálogo está muy cuidado, ya que dispone de una ficha por cada una de las tipografías. En la ficha puedes encontrar el nombre del diseñador, con un enlace a su biografía y otros datos personales. También dispones de la descripción de la tipografía y el set de caracteres. También hay ejemplos de textos en diferentes tamaños, desde 36px hasta 12px, en diferentes  colores, #000, #333 y #666, y diferentes variantes, cursiva, negrita y negrita cursiva Puedes ver como ejemplo la ficha de la tipografía Cararell.

Si te parece interesante y quieres ver como incluirlo en tu web acontinuación te cuento las diferentes formas, solo con CSS y con ayuda de Javascript.

Solo con CSS

Tienes varias formas de incluir las tipografías en tu web. La más sencilla de todas es incluyendo una hoja de estilos adicional:

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

Luego simplemente usas la tipografía en tu hoja de estilos de forma habitual:

CSS selector {
  font-family: 'Font+Name', serif;
}

Si no quieres cargar todas las variantes, puedes especificar las variantes que quieras añadiendo dos puntos y las variantes que quieras separadas por comas:

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

Si quieres añadir varias tipografías, no es necesario hacer 1 llamada por cada una de ellas, simplemente con separar los nombres con pipes "|" es suficiente:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans"/>

Y si quieres hacer todo a la vez simplemente sigue todas las reglas anteriores, y quedará algo de esta forma:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans"/>

Con ayuda de Javascript

Si no quieres que la carga de tu página se vea afectada por tener que resolver otras DNS y cargar contenido de servidores que no puedes controlar, puedes probar WebFont Loader. Una API de Javascript que te da un mayor control sobre las tipografías cargadas. Esta forma también es muy sencilla, pero requiere un mínimo de conocimiento de Javascript. Con añadir estas lineas en el head de tu página tendríamos todo listo para usarla

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js">
    </script>
    <script type="text/javascript">
      WebFont.load({
        google: {
          families: [ 'Tangerine', 'Cantarell' ]
        }
      });
    </script>

Esto carga las tipografías indicadas en families y si todo ha ido correctamente y el navegador permite estas tipografías se añadirá en el html las clases: 'wf-active' y 'wf-family-type-active' (por ejemplo: 'wf-cantarell-n4-active').

Esto nos permite usar en nuestra hoja de estilo tipografías alternativas en caso de no haber podido cargar las deseadas, de esta forma:

.wf-inactive p {
   font-family: serif
 }
 .wf-active p {
    font-family: 'Cantarell', serif
 }

Con WebFont Loader puedes solicitar fuentes a otros proveedores como por ejemplo TypeKit o incluso hacer llamadar a cualquier proovedor de tipografías especificando el proveedor.

En la llamada a WebFont Loader puedes especificar callbacks para ejecutar tu propio código en un momento dado. Las funciones de calback de las que dispones son:

• loading() Se llama cuando todos los módulos de proveedores de tipografías web (google, typekit, y/o custom) han reportadoq ue empiezan a cargar tipografías.
• fontloading(fontFamily, fontDescription) Se llama cuando se empieza a cargar cada solicitud de tipografía web. El parámetro  fontFamily es el nombre de la familia de la tipografía, y fontDescription representa el estilo y peso de la tipografía.
• fontactive(fontFamily, fontDescription) Se llama cuando ha terminado de cargar cada una de las solicitudes.
• fontinactive(fontFamily, fontDescription) Se llama si una solicitud ha fallado al cargar.
• active() Se llama cuando todas las tipografías web han sido cargadas o bien no se haya podido cargar, siempre y cuando al menos una  se cargado con éxito.
• inactive() Se llama si el browser no soporta tipografías web o si ninguna de las fuentes se ha podido cargar.

Sabiendo todo esto, no me he podido resistir a hacer pruebas con esta nueva API, así que os dejo una demo de uso, en las que cargo las fuentes bajo demanda.

Demo de Google Font API

¿Qué os ha parecido la API? ¿Quiéres eseñarnos tus nuevos diseños usando estas tipografías?