Tipografías con Google Font API

Tipografía Tangerine del Directorio Google Font API

Uno de los aspectos más limitantes a la hora de diseñar interfaces web resulta el de las tipografías a utilizar. Esto se debe a que los contenidos web se muestran empleando las tipografías disponibles en el sistema del visitante por lo que no podemos manipularlas a nuestro antojo.

Existen muchas técnicas para establecer el tipo de tipografía con la que se desea mostrar el contenido, a continuación exploraremos algunas de las más conocidas.

Técnica 1: Sustitución de Texto por Imágenes

Esta es una de las técnicas más antiguas y hoy en día menos recomendadas, su nombre original es FIR (Fahrner Image Replacement por sus siglas en inglés). Consiste en utilizar imágenes para sustituir letras o frases completas de un documento.

Técnica 2: Regla @font-face en CSS

La regla font-face disponible desde la versión 2 de CSS permite descargar fuentes con licencia TrueType (.ttf) o abiertas OpenType (.otf) para mostrar el contenido de un sitio web. Si bien es una solución bastante sencilla de emplear no es soportada por todos los navegadores web disponibles. Su uso es simple, solo se debe asignar a la regla el tipo de fuente y la dirección web donde se encuentra el fichero .ttf o .otf:

 @font-face {
    font-family: "Mi-Fuente";
    font-weight: bold;
    src: url('tipografias/mi-fuente.otf');
 }

Técnica 3: Scalable Inman Flash Replacement (sIFR)

Es una técnica que emplea JavaScript, CSS y Flash para reemplazar la tipografía por defecto, su funcionamiento se puede resumir en los siguientes pasos:

Al solicitar la página desde el navegador la función JavaScript detecta si el usuario dispone de la extensión Flash y luego rastrea el código en busca de la etiqueta o identificador del elemento al cual se desea aplicar la sustitución.
Si la extensión Flash no se encuentra instalada, JavaScript es desactivado y se muestra el texto en la tipografía establecida por defecto en la hoja de estilos. Por el contrario, si se dispone de Flash la función JavaScript toma las dimensiones de cada elemento que posea el identificador asignado.
Al realizarse la medición, la función JavaScript crea una película Flash con las medidas de los elementos marcados y la posiciona sobre el texto original, tomando además el texto mostrado por defecto como una variable en Flash.
Dentro de la película Flash, el código ActionScript toma el texto obtenido como variable y lo dibuja con la tipografía deseada, comenzando para ello con un tamaño de 6 puntos y aumentándolo hasta que coincide con el tamaño de la película Flash.

Este procedimiento solo toma unos segundos por lo que la transformación se hace de forma transparente para el visitante. Este método es bastante válido ya que los lectores de pantalla detectan el texto original al igual que los motores de búsqueda. Aunado a ello si el visitante no posee Flash, no se pierde el texto ya que se muestra el definido originalmente.

Técnica 4: Cufón

Cufón surgió como una alternativa a sIFR, sus metas principales son velocidad, compatibilidad y por supuesto facilidad. Los que hemos utilizado sIFR podemos dar fe que si bien es una técnica bastante buena no es sencilla de implementar. Esta técnica funciona a groso modo de la siguiente manera:

Utiliza un generador de tipografías que convierte la tipografía seleccionada (cargada desde un fichero de tipografías ubicada en el computador) en formato SVG.
Luego toma el SVG y lo convierte en formato VML.
Una vez obtenido el VML, se convierte en formato JSON utilizando funciones de JavaScript y se muestra en el navegador.

Técnica 5: Google Font API

Entre muchas más opciones disponibles para modificar las tipografías, existe un proyecto de Google, llamado Font API. El proyecto es libre y abierto, posee su propio directorio de tipografías y también un cargador por si se desea personalizar el comportamiento de la carga de tipografías en el navegador del visitante. Esta solución es basada en hojas de estilo CSS. Su utilización es bastante simple, basta con realizar lo siguiente:

 # 1.- Importar la hoja de estilos con la tipografía deseada
 # Las tipografías disponibles se encuentran en el Directorio de Tipografías de Google
 <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Nombre+Tipografía">
 # 2.- Aplicar el estilo a los elementos del sitio en CSS
 elemento_css {
    font-family: 'Nombre de Tipografía', serif;
 }
 # Generalmente se recomienda utilizar una tipografía genérica como serif,
 # en caso de que ocurra un error y no pueda ser mostrada la tipografía elegida.