Siguiendo el artículo de Jon Tangerine @font-face in IE, Making Web Fonts Work nos proponemos realizar la todavía poco común tarea de componer algunos párrafos de texto importando una fuente desde un servidor y usando el selector CSS @import. Se trata de un proceso técnico que lleva años siendo “the next big thing” para diseñadores y desarrolladores en el contexto de la web. Casi todos los navegadores modernos permiten usar esta técnica, por tanto el futuro debería ser casi ya.
Intro
Actualmente el diseñador gráfico dispone de un reducido grupo de familias tipográficas en su trabajo para entornos web, son las llamadas core web fonts, es decir, las fuentes que estan instaladas por defecto en los sistemas de la mayoría de ordenadores. Si pensamos que, además, no todas son útiles para su uso a cuerpos de lectura, las opciones de trabajo son 4-5 fuentes. Es decir, Arial, Verdana, Trebuchet para las sans y Georgia, Times como fuentes serif. Ni los diseñadores suizos más ortodoxos hubieran soñado con un futuro tan espartano.
Existe, sin embargo, una posible evolución a este límite que supone trabajar con una paleta de 5 fuentes. Se trata de la técnica @import de CSS
Esta técnica no es una novedad. Muchas páginas y artículos hablan sobre este tema.
Es básica la lectura del artículo (agosto de 2007) CSS @ Ten: The Next Big Thing de Håkon Wium Lie, propulsor de CSS en 1994 y miembro del W3C CSS Working Group.
Algunos tipógrafos/as han empezado a difund¡dir sus trabajos con licencias de uso tipo Creative Commons (y otras). Además algunas famílias tipográficas publicadas bajo estas licencias son francamente interesantes.
Proceso
La fuente usada en este ejemplo es una Fontin-Regular, diseñada por el tipógrafo holandés Jos Buivenga para su fundición exljbris Font Foundry y distribuida con licencia de uso personal, comercial, haciendo referencia al autor.
El selector @import de nuestro CSS importa (usando una url) la fuente. La fuente estará alojada en nuestro servidor.
Para el ejemplo que sigue mas abajo, el formato de la fuente es opentype (.otf).
Actualmente @font-face lo soportan los siguientes navegadores y permiten los siguientes formatos de fuentes
Safari 3.1 (.ttf) (.otf)
Firefox 3.1 beta y 3.5 (.ttf) (.otf)
Explorer 4+ (EOT)
Opera 9 (.ttf) (.otf)
Así que solo los usuarios con estos navegaores podrán ver la tipografía Fontin-Regular que aquí hemos usado para las composiciones de los párrafos que siguen a este post.
Óbviamente, el resto de usuarios, verán una Georgia.
Este es el selector CSS:
.fontin
{font-family: 'Fontin-Regular',georgia, serif;}
Y este el método para importar la fuente:
@font-face {
font-family: 'Fontin-Regular'; src: url('http://www.horacipolanco.biz/files/Fontin-Regular.otf') format ('opentype');
}
Tan fácil?
No. Los usuarios de IE Windows no pueden ver esta familia tipográfica en su pantalla ya que el formato de fuente otf no funciona con Explorer. El formato que este navegador usa para rasterizar fuentes es EOT (Embedded OpenType).
Así que la solución (tal y como propone en el artículo de Jon Tangerine) para el diseñador web es convertir la fuente al formato EOT con una aplicación de Microsoft llamada Microsoft WEFT.
Sin duda, una tarea muy poco amigable. Por si fuera poco, WEFT no parece (despues de testearla) una aplicación muy estable.
Una vez convertida la fuente al formato EOT, lógicamente, deberíamos incluir en la hoja de estilos (indicando en el CSS que ocurre si el navegador es explorer) un código parecido a éste:
<!--[if IE]>
<style type="text/css" media="screen">
/* @font-face IE EOT rules */
.fontin {font-family:Fontin-Regular, georgia, serif;}
p {font-family:Fontin-Regular, georgia, serif;}
@font-face {
font-family:Fontin-Regular; src: url("Fontin-Regular.eot");
}
</style>
<![endif]-->
El texto de arriba es una imagen de la fuente Fontin-Regular.
Actulamente, parece que menos de un 25% de navegadores los mostrarán realmente con Fontin-Regular.
Opinando sobre todo esto
Sin duda, se trata de una técnica fundamental para el desarrollo del diseño gráfico en el contexto de la web. Todo apunta a que, en breve, será una técnica habitual aunque, también es cierto, hasta que Microsoft no decida estandarizar el formato de importación, seguirá siendo una técnica maravillosa pero de baja utilidad.
Usar esta técnica permitira: 1. Mayor calidad en el diseño web. 2. Una posible explosión en el ámbito de la creación de familias tipográficas, especialmente pensadas para la lectura en pantallas a una resolución de 72dpi.
Ver ejemplos de importación de Fontin-regular con distintos tamaños de letra e interlínea