Google Font Directory: tipografías libres para la web

Actualizado el 25/05/2010 < > 1 Comentario

Resúmen: Vamos a ver como embeber una tipografía en tu página desde Google para que el usuario vea la web tal y como la diseñes, aunque no sea una fuente de uso común.

Meneame Bitacoras

Vía Twitter he conocido GoogleFont, con el que podemos usar en nuestras webs tipografías de gran calidad con licencia open source.

El principal problema de los diseñadores web a la hora de trabajar con tipografías es que si se utilizan fuentes poco comunes muy pocos usuarios verán la página tal y como se diseñó. Una solución a este problema es utilizar sistemas de reemplazo como SIFR, basado en Flash. Otra solución es embeber la propia fuente en la página para que el usuario la descargue como un elmento más junto a imágenes y resto de recursos web.

[ACTUALIZACIÓN] Un día después de publicar este post conozco Fonts-Live de Ascender. ¿Estaremos ante la guerra de las tipografías web?

Los diferentes navegadores no tratan de forma homogénea las tipografías embebidas. Con la librería de javascript WebFont Loader podremos cargar tipografías (de Google o de cualquier proveedor, como Typekit), controlar cuándo se ha completado la carga para hacer un callback o incluso mostrar tipografías comunes mientras se realiza la descarga de la fuente.

De momento éstas son las que hay disponibles a través de licencia open source de Google, aunque se prevé que el catálogo aumente:

Tipografias open source

Cómo insertar una tipografía.

Es realmente sencillo insertar una tipografía desde Google Font en nuestra web:

1. Enlazamos con la tipografía alojada en los servidores de Google:

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

En el Directorio de fuentes tenemos toda la información necesaria sobre cada una de las fuentes disponibles, incluído el código de ejemplo para insertarlas en nuestra página.

2. La llamamos desde el estilo CSS

h1 { font-family: 'Cantarell', arial, serif; }

Y listo, ya la tenemos funcionando.

Variantes de una tipografía.

Para conseguir variantes de una fuente, como cursiva, negrita, etc. debemos añadir los parámetros de la API a la url: 

<link href='http://fonts.googleapis.com/css?family=Cantarell:regular,italic,bold,bolditalic' rel='stylesheet' type='text/css'>

Habría que verificar en el Google Font Directory las variantes disponibles para cada tipografía.

Cargar desde CSS con @import

Existe la posibilidad de cargar la tipografía desde el propio código CSS:

@import url(http://fonts.googleapis.com/css?family=Cantarell);

WebFont loader

Ésta es la librería con la que tendremos mayor control del proceso de carga de las tipografías.
Con el siguiente ejemplo, conseguimos que primero se muestre el texto en la fuente serif por defecto, y cuando las fuentes han sido descargadas, se muestra el texto en la fuente especificada: 

<html>
<head>
<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>
<style type="text/css">
.wf-inactive p { //Muestra los párrafos en fuente serif mientras cargan las fuentes
font-family: serif
}
.wf-active p { //Muestra los párrafos en Tangerine cuando la fuente ha sido cargada
font-family: 'Tangerine', serif
}
.wf-inactive h1 {//Muestra los h1 en fuente serif mientras cargan las fuentes
font-family: serif;
font-size: 16px
}
.wf-active h1 {
font-family: 'Cantarell', serif;//Muestra los h1 en Cantarell cuando la fuente ha sido cargada
font-size: 16px
}
</style>
</head>

<body>
<h1>This is using Cantarell</h1>
<p>This is using Tangerine!</p>
</body>
</html>

Google´s AJAX APIs

Si usas alguna de estas apis Ajax, puedes cargar el WebFont Loader así: 

<script type="text/javascript" src="http://www.google.com/jsapi">
</script>
<script type="text/javascript">
google.load("webfont", "1");

google.setOnLoadCallback(function() {
WebFont.load({
google: {
families: [ 'Tangerine', 'Cantarell' ]
}
});

</script>

Especificando proveedores y fuentes

Este ejemplo carga la Tangerine y Cantarell desde la API de Google Font

WebFont.load({
google: {
families: [ 'Tangerine', 'Cantarell' ]
}
});

También podemos cargar de Typekit: 

WebFont.load({
typekit: 'myKitId'
});

O de ambos: 

WebFont.load({
google: {
families: [ 'Tangerine', 'Cantarell' ]
},
typekit: 'myKitId'
});

Además disponemos de un módulo personalizable (custom) que puede cargar una hoja de estilo desde cualquier proveedor de fuentes: 

WebFont.load({
custom: { families: ['OneFont', 'AnotherFont'],
urls: [ 'http://myotherwebfontprovider.com/stylesheet1.css',
'http://yetanotherwebfontprovider.com/stylesheet2.css' ] }
});

Para más completa información sobre el Google WebFont Loader puedes visitar la página oficial.

Meneame Bitacoras

Publicado el 25/05/2010, última actualización 25/05/2010.

Autor: Fran Quero

URL: FranQuero - Diseñador Web

Añadir Comentario (Subir al texto)

1 Comentario

  1. Asyou

    No había visto este articulo. Es muy completo, gracias.

    Miércoles, 1 de diciembre 2010

(Subir al texto)

Añadir Comentario

* Campos obligatorios