Descifrando @font-face

Durante los últimos cinco años, la tipografía en el marco de la web ha estado basada principalmente en las fuentes. Los diseñadores web estaban limitados al uso exclusivo de fuentes seguras para la web, más conocidas por el término en inglés “web-safe fonts”; se trata de fuentes disponibles en todos los sistemas operativos de los ordenadores de los usuarios. Como puedes imaginar, o habrás experimentado en primera persona, esto era muy frustrante para nosotros, fanáticos de la tipografía, pero lidiábamos con ello. Sin embargo, curiosamente, era también algo bueno ya que al tener un conjunto limitado de fuentes entre las que elegir, el tiempo invertido en la elección de una fuente perfecta era mínimo (no me estoy quejando). Ahora, en cambio, podemos seleccionar una fuente adecuada al aspecto y sensaciones que queremos transmitir y lograr, en consecuencia las empresas ya pueden trasladar perfectamente su imagen de marca y su tono corporativo a través de la tipografía.

Al mismo tiempo surgieron algunos métodos que servían para habilitar el empleo de tipografías en los sitios web, el más empleado es @font-face. Esta regla css nos proporcionaba la posibilidad de descargar fuentes desde un servidor para poder usarlas en nuestras increíbles páginas web. Al principio, la compatibilidad con los navegadores era mínima, pero ahora está ampliamente aceptada. La única excepción destacable es el navegador Opera Mini (venga chicos, ¿cómo es eso?).

Los fundamentos

@font-face es una regla CSS que especifica el nombre de la fuente, su ubicación y su grosor. En el siguiente ejemplo simplificado, la fuente está almacenada en font-face.com y se especifica además su ruta concreta. Podría tener el siguiente aspecto:

Como puedes ver, el nombre de la fuente es “DeliciousRoman”. Este es el nombre de la fuente que será usado en nuestro CSS, también indicamos una alternativa por si la fuente no se carga:

Compatibilidad en navegadores

Sin embargo, las cosas no son así de simples. Debido a que distintos navegadores requieren diferentes formatos de fuentes, debemos asegurarnos de proporcionar todas las opciones necesarias.

Aquí tienes una lista de navegadores acompañada de los tipos de archivo que admiten:

• Internet Explorer: EOT
• Navegadores Mozilla: OTF y TTF
• Safari y Opera: TTF, OTF y SVG
• Chrome: TTF y SVG
• Navegadores móviles como Safari en el iPad y el iPhone: SVG

Evolución de la compatibilidad

Ha habido varios y distintos convenios respecto a @font-face para abordar el tema de compatibilidades. Es bueno saber cómo ha evolucionado @font-face, y la siguiente breve recapitulación proporciona enlaces a una sólida cantidad de lecturas sobre el tema.

Paul Irish ideó en 2009 la sintaxis Bulletproof para @font-face. A lo largo de los años han ido apareciendo algunas soluciones al problema de la incompatibilidad de los navegadores, la que más controversia suscitó fue smiley face hack.

Después surgió otra versión llamada Mo’Bulletproofer Syntax, creada por Richard Fink, enfocada a solucionar los problemas de las fuentes con el sistema Android.

Por fin hemos llegado a la sintaxis FontSpring para @font-face. Este enfoque simplifica bastante el lenguaje y tiene el siguiente aspecto:

En el ejemplo anterior, puedes ver como las fuentes están alojadas de forma privada en un servidor dentro de una carpeta llamada “fonts”.

Pero, ¿de dónde saco todas estas fuentes?

Font Squirrel (y algunos otros) proporcionan generadores de fuentes web que convierten cualquier fuente en un kit de fuentes web incrustables. Incluido en el kit encontrarás todos los archivos necesarios para la fuente, la sintaxis CSS específica para @font-face, y un ejemplo HTML. Después podrás colocar los archivos de la fuente directamente en tu servidor y ajustar la ruta en la regla CSS para @font-face.

Advertencia: Asegúrate de contar con los derechos adecuados para poder usar las fuentes con el generador y en tu sitio.

Usar un servicio de alojamiento de fuentes externo

Dependiendo de si alojas tú mismo privadamente la fuente o haces uso de un servicio como Typekit (veremos más sobre esto más adelante), tu CSS será un poco distinto. Por ejemplo, con un servicio como Typekit, lo que haces es, bueno, “kits” o paquetes de fuentes que contienen todas las fuentes que usarás para cada sitio web concreto. Para cada paquete que crees se te proporcionará un fragmento JavaScript que tendrás que colocar en el <head> de tu documento. Este fragmento de código se encargará de cargar las reglas @font-face adecuadas para cada navegador.

Si quieres saber más sobre por qué Typekit usa JavaScript, lee Better web font loading with JavaScript (Carga de fuentes mejorada con JavaScript).

En los ajustes del paquete que proporciona fonts.com encontrarás, en sus planes de suscripción premium, tres opciones distintas para la publicación. Además de una opción JavaScript similar a la que ofrece Typekit, también ofrecen una opción no basada en JavaScript que enlaza a una hoja de estilo que ellos mismos alojan en sus servidores. Evidentemente tu CSS tendrá un aspecto distinto dependiendo de la opción que elijas.

¿Fuentes gratuitas o fuentes alojadas?

Como puedes imaginar, las licencias de las fuentes son un tema crítico a la hora de hacer uso de las fuentes en la web. El amplio empleo de @font-face ha traído consigo una gran explosión de fuentes gratuitas, algunas de las cuales son realmente buenas, otras no tanto. Font Squirel, Fontex y DaFont son algunos de los lugares más populares que ofrecen fuentes gratuitas. Lost Type Coop es otro gran lugar donde buscar fuentes, aceptan donaciones. Google Fonts también ofrece una inmensa selección de fuentes gratuitas, aunque en mi opinión algunas de ellas tienen poca calidad.

seguir leyendo en Tuts+