Tutorial para incluir en nuestra Web cualquier tipo de fuente: Tipos de archivos de fuentes (ttf, eot, otf, svg), propiedad CSS2 @font-face

Históricamente los diseñadores web nos hemos encontrado con el problema de poder incluir únicamente un puñado de aburridas fuentes “seguras” en nuestros diseños web. Afortunadamente desde hace un tiempo este problema fue resuelto mediante nuevas propiedades de CSS (como la @font-face) permitiéndonos embeber las fuentes en nuestro site y que se visualizaran correctamente, con indiferencia de si el usuario final tiene instalada o no la fuente en concreto en su ordenador.

Pero esta propiedad mágica (@font-face) de CSS seguro que os ha dado más de un dolor de cabeza al comprobar que no es tan “mágica” después de todo. Lo mas seguro es que vuestra Web se vea completamente diferente en cada nuevo navegador con la que la probáis…verdad? Y ya no hablemos de versiones del mismo navegador…todo un mundo!

Da igual que ya hayáis empezado a trabajar con esta propiedad o que no la conocierais hasta ahora. En este artículo te daremos todas las claves para aprender a utilizarla correctamente, empezando desde el “érase una vez un archivo de fuente”. Hoy vamos a conseguir que las fuentes de vuestra Web se vean perfectamente bajo cualquier navegador y configuración, explicando paso a paso los trucos para cada uno de ellos.

Además daremos soluciones alternativas, y en resumen, os explicaremos TODO lo que hay que saber sobre las fuentes, sus tipos, los navegadores Web que los soportan y las características específicas de las versiones de los navegadores. Cual es la mejor manera de incluir una fuente en mi Web? De qué forma puedo conseguir incrustar fuentes en mis sitios web, y que se vean bien en cualquier navegador? Todas estas preguntas serán respondidas en el definitivo artículo sobre fuentes en la web.

 

1.- Un poco de teoría: Tipos de archivos de fuentes.

Estos son los tipos de archivos de fuentes que debes de conocer, y sus principales características:

TTF (True type font): Es el tipo de fuente más comúnmente utilizado ya que es un formato estándar de tipo de letra escalable. Fue desarrollado por Apple a finales de los 80

OTF (Open type font): Originada por Microsoft, esta basada en el formato ttf pero con algunas tablas de mejora en su estructura principal. En la actualidad se encuentra en proceso de convertirse en un estándar abierto.

EOT (Embedded open type): Creada igualmente por Microsoft, por lo general su utilidad radica enla posibilidad de convertir una fuente true type a EOT y así poder ser visualizada en el navegador Internet Explorer. Ha sido rechazada como estándar por el W3c. Existe una aplicación llamada Web Embedding Fonts Tool (WEFT) que realiza la conversión entre TTF y EOT de manera automática.

SVG (Scalable vector graphics): Se trata de una especificación para describir gráficos vectoriales bidimensionales en formato XML. En un archivo SVG pueden ser incrustadas varias fuentes diferentes, por eso cada una de ellas llevara un identificador único que se especifica en el momento de crear el archivo SVG.

 

2.- La propiedad de CSS2 “@font-face”

No voy a aburriros con la historia del CSS1 hasta el CSS3 (actualmente es la versión vigente) ya que no es el objetivo de este post, pero si viene bien que os suene que la propiedad “@font-face” no estaba estandarizada en el lenguaje CSS hasta hace pocos años, cuando salió a la luz el CSS2. De todos modos aún entonces los navegadores diferentes a Explorer fueron reticentes a utilizar esta etiqueta debido a que había que hacerlo obligatoriamente con formato .EOT (propiedad de Microsoft). Hasta que por fin, con la llegada del CSS3, ya se pudo incrustar tipos como el TTF o el OTF.

Su forma de uso es sencilla. En la hoja de estilos CSS hay que colocar lo siguiente (la url variara en vuestro caso):

 

a)   Para formatos TTF

@font-face {

font-family: nombre-De-Mi-Fuente;

src: url(url/de/mi/fuente/fuente.ttf) format(‘truetype’);

}

b)  Para formato OTF

@font-face {

font-family: nombre-De-Mi-Fuente;

src: url url/de/mi/fuente/fuente.otf) format(‘opentype’);

}

c)  Para formato SVG

font-face {

font-family: nombre-De-Mi-Fuente;

src: url (‘url/fuente.svg#Identificador-de-fuente’) format(‘svg’);

}

d)     Para formatos EOT:

@font-face {

font-family: nombre-De-Mi-Fuente;

src: url url/de/mi/fuente/fuente.eot);

}

e)     Para varios formatos a la vez, por ejemplo OTF + SVG:

@font-face {

font-family: ‘nombre-de-mi-fuente’;

url(‘fuente.otf’) format(‘opentype’),

url(‘fuente.svg#Fuente-identificador’) format(’svg’);

}

 

Y una vez incrustada la fuente, ya podemos usarla normalmente como una fuente de las denominadas “seguras”:

.headder_text{

font-size:19px;

font-family: nombre-de-mi-fuente, Tahoma;

}

 

* En el ejemplo que se acaba de citar, un navegador que soporte la fuente incrustada “nombre-de-mi-fuente” la mostrará, ya que es la primera opción que le indicamos. Incluimos también el tipo de letra “Tahoma” como medida de seguridad, para asegurarnos que los navegadores que no sean capaces de mostrar nuestra primera opción, no usarán cualquier tipo letra sino una que mas o menos se parezca a la primera (en este caso hemos elegido Tahoma).

.

3.- ¿Qué navegadores soportan la propiedad CSS @font-face?

 

Nombre	Extensión	Estándar	Navegadores soportados *	Escalable
True type Font	.TTF	Si	Firefox 3.5 +Safari 3.1 +  Opera 10 + Chrome 2.0 +	Si
Open type	.OTF	Si	Firefox 3.5 +Safari 3.1 +  Opera 10 +	Si
Embedded open type	.EOT	No	Internet Explorer 4.0 +	Si
Scalable vector graphics	.SVG	Si	Safari 3.1 +Chrome 0.3 +  Opera 9 +	Si

* La versión citada es la primera que soporta el tipo de fuente en concreto, por lo que las siguientes versiones del mismo navegador la soportarán de igual manera.

4.- Comenzamos el tutorial para incluir cualquier fuente a mi Web. Paso 1: Elegir la fuente

Hace ya algún tiempo escribí un buen artículo que ha tenido bastante éxito sobre como conseguir recursos de fuentes. Pásate por este post para ver las mejores páginas gratuitas donde bajarte archivos de fuentes, o si lo prefieres podrás descargarte un pack con mas de 12.000 fuentes entre las que elegir la tuya. Te recomiendo que elijas varias, puesto que cambia mucho el ver una fuente dentro de tu página o verla fuera.

Una vez que tengas tres o cuatro fuentes a mano, pasa al siguiente punto. Mi recomendación es que elijáis siempre una fuente TTF (true type).

Para este tutorial hemos elegido el tipo de fuente coalition, disponible para descarga desde aquí. También podéis ver una vista previa de la fuente aquí.

 

5.- Paso 2: Incluir la fuente en la web (incrustarla) mediante la propiedad @font-face

@font-face {

font-family: titulo;

src: url(../fonts/coalition.ttf) format(‘truetype’);

}

 

.titular1{

font-family: titulo, Verdana;

font-size: 20px;

}

 

6.- Convertir nuestro archivo de fuente ttf a eot

Hay muchos programas que hacen esta conversión de manera automática, algunos mas complicados que otros, pero la solución mas rápida según mi experiencia (y mas fiable) pasa por realizar este proceso de manera on-line en cualquier Web que ofrezca este servicio. Para mi, una Web como dios manda es

http://www.kirsle.net/wizards/ttf2eot.cgi

En esta Web (esta en inglés pero es terriblemente intuitiva) tendremos dos botones: Uno para subir la fuente ttf deseada y otro para convertirla a EOT. Así de fácil. Una vez realizado el proceso, os descargáis el nuevo archivo .EOF y lo metéis en la carpeta fonts que habíamos creado previamente, junto al archivo .TTF.

 

7.- Crear un nuevo tipo de fuente para que se visualice en Internet Explorer

Como ya tenemos el archivo convertido .EOT en nuestra carpeta “fonts”, solo nos queda añadir en la hoja de estilos lo siguiente:

@font-face {

font-family: titulo_explorer;

src: url (‘../fonts/coalition.eot);

}

Y ahora modificamos ligeramente las propiedades de la clase “titular1”, añadiendole este nuevo tipo como segunda opción en la propiedad “font-family”:

.titular1{

font-family: titulo, titulo_explorer, Verdana;

font-size: 20px;

}

De esta manera, Internet Explorer intentará renderizar el primer tipo, y al no poder, lo hará con el segundo en formato EOT, cosa que si que podrá hacer sin problemas. El tercer tipo especificado (Verdana) lo dejamos para navegadores minoritarios que pudieran tener algún problema, aunque suponen menos de un 1% del total de usuarios potenciales. También serviría en el supuesto de que vuestro archivo de fuentes no se encontrara disponible en el servidor (borrado accidental, error en la transferencia de datos, etc.).

 

8.- El toque final: Convertir la fuente a SVG

Hagamos una recapitulación: Con lo realizado hasta ahora, que navegadores siguen sin renderizar bien nuestra nueva fuente?

–> Mozilla Firefox en versiones inferiores a la 3.5, puesto que es precisamente a partir de esta versión cuando implementó el soporte para esta y otras nuevas propiedades del estándar CSS3.

–> Internet Explorer 6: Este navegador es el peor programado de la historia, y por ello hacen falta trucos especiales para conseguir el resultado deseado. Por una cuestión de principios básicos, desde hace algún tiempo no programo para este navegador. Tu eres libre de hacerlo, y si quieres comentarnos la solución en un comentario será bienvenido.

–> Safari en tu iPOD / iPHONE: Igualmente esta versión del navegador ignora la propiedad font-face.

Por eso, para que se termine de ver bien en el 5% restante (aproximadamente) de usuarios que todavía no ven nuestra fuente, hace falta convertir nuestro archivo ttf al formato SVG. Con esta última conversión el resultado sería visible correctamente prácticamente por el 99,9% de los usuarios. Buena cifra, no?

Para ello, usaremos otra excelente web: font squirrel. Subimos nuestra fuente, aceptamos los términos de uso y seleccionamos el modo “expert”. Deberemos indicar que queremos usar nuestra fuente en formato SVG, TTF y EOT, y pulsamos en “Download your kit”. Se nos descargará un archivo que contiene tanto la fuente convertida en los diversos formatos, como una hoja css con la especificación completa de la etiqueta font-face, más o menos así:

 

@font-face {

font-family: ‘LondonTubeNormal’;

src: url(‘8-webfont.eot’);

src: local(‘☺’), url(‘8-webfont.ttf’) format(‘truetype’), url(‘8-webfont.svg#webfontJLWNI2AR’) format(‘svg’);font-weight: normal;

font-style: normal;

}

 

Este código será el que necesitaremos incrustar en nuestra hoja de estilos, y una vez copiados los archivos de fuentes a nuestro directorio, quedara listo para ser usado por el método habitual.

Nótese que el código no tiene errores, la “carita” o “smiley” es una solución curiosa para un problema que sería demasiado largo de explicar y que no tiene demasiado interés. Simplemente sabed que es un pequeño “hack” para permitir el funcionamiento correcto del código.

Esta última Web es un buen recurso para ser utilizada siempre; el único motivo por el que no lo he citado al principio es porque quería que comprendierais el código. De otro modo hubiera sido “copiar y pegar” y seguro que habrían salido miles de problemas que os hubieran acabado tirando para atrás.

 

9.- Alternativas a incrustar las fuentes mediante css: Google fonts

Pues si señoras y señores, ahora viene lo mejor. De nuevo google tuvo una idea rompedora y bastante básica: Porque no alojar fuentes libres de derechos en nuestros servidores para poder ser usadas por cualquier diseñador Web? Y dicho y hecho, así nació GOOGLE FONT DIRECTORY.

En esta sencilla Web se listan una serie de fuentes, no son miles pero hay cosas interesantes, que pueden ser incrustadas y utilizadas en nuestra Web mediante un sencillo link. El modo de uso es el siguiente:

 

1) Ir a Google fonts

2) Elegir una fuente

3) Seleccionarla y pinchar en la pestaña “Use this font”.

4) Copiar el enlace que aparece en la cabecera de la pagina o paginas en la que vayamos a utilizar la fuente. El enlace tiene esta pinta:

 

<link href=’http://fonts.googleapis.com/css?family=Just+Me+Again+Down+Here&#8217;

rel=’stylesheet’ type=’text/css’>

5) Utilizar la fuente como una normal, llamándola por su nombre. En este caso el modo de uso sería el siguiente:

 

h1 { font-family: ‘Just Me Again Down Here’, arial, serif; }

Y listo. Por supuesto, alguna desventaja habría de tener esto… y es que de momento solo hay disponibles un puñado de fuentes. No obstante pueden ser usadas libremente para fines comerciales o no, y el código generado es muy limpio. Además nos ofrecen información del uso que se le ha dado a cada fuente, clasificada por países. Por si acaso no queremos caer en una fuente típica, que es precisamente de lo que queremos huir en este artículo…

Un último apunte, y es que esta opción es válida para cualquier navegador moderno.

 

10.- BONUS: El futuro de las fuentes Web

WOFF (Web Open Font Format) es el formato de fuente especialmente creado para ser usado en Web. Fue desarrollado en 2009 y esta en proceso de ser estandarizado como recomendación del w3c. Se supone que va a ser la fuente que haga este artículo completamente inservible, ya que todos los navegadores darán soporte a este formato próximamente y podremos olvidarnos así de todos los demás. (Que bonito suena, verdad?)

Actualmente, WOFF es soportado por Internet Explorer 9, Chrome desde su versión 5.0, Firefox desde su versión 3.6 y Safari ha anunciado que lo hará en próximas versiones.

 

11.- BONUS II: La Biblia sobre las fuentes Web (en inglés)

Para aquellos que el inglés no os suponga una barrera insalvable, no podía cerrar este artículo sin presentaros la mejor página Web en mi opinión que hay sobre el tema. Esta dedicada íntegramente a fuentes Web y a la propiedad @font-face para incrustarlas. Tenéis disponibles ejemplos, ayuda de todo tipo, soporte de navegadores actualizado, etc. No dejéis de visitarla, porque merece la pena, ya que incluso hay un listado de fuentes listas para descarga y preparadas para ser incrustadas mediante el método que hemos explicado hoy aquí..

LINK: http://webfonts.info

 

Espero que este artículo os sea de ayuda, y os permita adornar vuestros diseños Web con fuentes espectaculares sin que acabéis tirándoos de los pelos por problemas de compatibilidad con navegadores. Buena suerte!

 

Jon Rivas