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:
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:
This is using Cantarell
This is using Tangerine!
Google´s AJAX APIs
Si usas alguna de estas apis Ajax, puedes cargar el WebFont Loader así:
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.