A la hora de elegir las tipografías a usar en una web surge el problema de la disponibilidad de las fuentes en el sistema del usuario, nuestro diseño podría tener un aspecto muy diferente en el ordenador del usuario si éste no tiene instaladas las fuentes que hayamos usado.

Para minimizar el problema los diseñadores emplean las denominadas “web safe fonts”, que son las fuentes que probablemente tendrán instaladas la mayoría de usuarios y ofrecen alternativas para aquellos que no las tengan.

Ejemplo de CSS:

p{font-family:"Tahoma", Geneva, sans-serif}

En este caso los párrafos usarán la fuente Tahoma siempre que esté presente, la fuente Geneva en caso de no estarlo, o una fuente sans-serif cualquiera si las dos anteriores no están disponibles.

Aquí pueden consultarse estadísticas sobre la disponibilidad en sistemas Windows y Mac de algunas fuentes consideradas “web safe”.

¿Y si necesito usar otras tipografías?

Aunque la mayoría de diseños puede ser suficiente usar unas pocas fuentes “web-safe”, otros diseños pueden requerir tipografías no estándar y en ciertas aplicaciones web puede necesitarse mayor control sobre las fuentes.

El segundo caso es con el que me he topado recientemente en un proyecto: cónsiderese una aplicación web que incluya un editor de texto WYSIWYG (estilo Word) en el que los usuarios puedan formatear el texto y visualizar el resultado mientras editan.

En una aplicación así, la solución de ofrecer la posibilidad de editar el texto con un conjunto de fuentes consideradas web-safe no es una buena idea, ya que muchos usuarios no las tendrán disponibles y el formateo fallará en esos casos.

Google Web Fonts al rescate

Por suerte Google ofrece un servicio para ayudar a los desarrolladores con este problema, es Google Web Fonts, una colección de fuentes para web de libre distribución que podemos usar en nuestros diseños simplemente añadiendo la hoja de estilos correspondiente a la tipografía.

Tag para incluír en la página la fuente “Condiment”:

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

Como de costumbre Google ofrece además una API para desarrolladores y una librería Javascript para quienes necesiten más control, ambas sirven para lo mismo pero Google recomienda el uso de la librería.

WebFont Loader

WebFont Loader es la librería de Javascript que permite cargar fuentes de Google Web Fonts además de otros proveedores, Google aloja esta librería y permite su uso de forma pública por lo que basta con incluirla con la siguiente línea:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>

Después para cargar fuentes sólo tendremos que hacer lo siguiente en nuestra aplicación:

<script type="text/javascript">
    WebFont.load({
        google: { families: [ 'Aclonica','Cabin'] }
    });
</script>

WebFont Loader también ofrece la posibilidad de responder a ciertos eventos que nos permiten saber como evoluciona la operación de carga, así por ejemplo el evento active(); indica que se ha terminado de intentar cargar todas las fuentes, fontactive() es llamado cuando una fuente en concreto ha sido cargada con éxito, etc. Consultar el resto de eventos disponibles aquí.

El siguiente ejemplo, que también emplea la librería jQuery para mayor simplicidad, hace lo siguiente:

1. Intenta cargar las fuentes específicadas.
2. Muestra en la página una lista de las fuentes que se han cargado formateando cada elemento con dicha fuente.
3. Muestra una lista de las fuentes que no se han podido cargar.
4. Muestra un mensaje cuando todas las operaciones han terminado.

<script type="text/javascript">
    $(function() {
        $("body").append('<ul id="cargadas"><h2>Se cargaron con éxito las siguientes fuentes:</h2></ul><ul id="fallidas"><h2>Las siguientes fuentes fallaron:</h2></ul>');
        WebFont.load({
            google: { families: [ 'Aclonica','Cabin','Fake Font 1', 'Fake Font 2'] },
            active: function() {alert('Listo !');},
            fontactive: function(fontFamily) {
                $("#cargadas").append('<li style="font-family:'+fontFamily+';">'+fontFamily+'</li>');
            },
            fontinactive: function(fontFamily) {
                $("#fallidas").append('<li>'+fontFamily+'</li>');
            }
        });
    });
</script>

Esta es la aproximación que he utilizado en mi proyecto, la aplicación carga un conjunto de fuentes y una lista desplegable da la posibilidad al usuario de elegir la fuente con la que quiere formatear el texto, el resultado se puede mostrar inmediatamente con la seguridad de saber que la fuente está disponible.