Font-face: carga tu propia fuente tipográfica con CSS

Valencia, 18/07/2011 Gatsu

En el larguísimo camino que me he embarcado junto con otras personas hacia la creación de una web, nos hemos topado con un caso peculiar, para ser más originales, queríamos usar una tipografía de fuente distinta, por supuesto gratuita, pero claro, si no la tiene una persona instalada en su pc, de poco sirve, y mencionar que los usuarios se la descargasen era una idea loca, así que indagando encontré que con CSS3 ya se puede cargar un archivo de fuente tipográfica que esté alojado en el servidor. Para hacer esto utilizaremos el método de CSS @font-face.

El código es el siguiente:

@font-face {
 font-family: miFuente; /* requerido */
 src: source;                        /* requerido */
 font-weight: weight;                /* opcional */
 font-style: style;                /* opcional */
}

En font-family ponemos el nombre que le vamos a dar a la fuente, en src la ruta donde se encuentra el archivo ttf, eot... y los atributos font-weight y font-style son opcionales y son para si queremos negrita, cursiva, etc...
Luego simplemente en donde queramos poner el estilo de letra la fuente personalizada ponemos la propiedad "font-family: miFuente" y listo.

Si solo fuese eso sería demasiado fácil, imagino que a estas alturas ya sabréis que hay distintos navegadores, lo que implica que la compatibilidad con archivos de tipografía de fuente no es la misma en todos, por ejemplo Internet Explorer solo acepta la extensión .eot, mientras que Firefox, Chrome, Opera... menos Iphone, todos soportan .ttf, así que no es buena idea hacer una web en donde según el explorador se vea de una manera u otra porque no cargue, con lo que yo recomiendo hacerlo para IE y para el resto de navegadores. Para facilitar las cosas, primero os pongo esta imagen de que navegadores soportan que archivos

Lo más fácil es que os encontréis fuentes en .ttf, en ese caso utilizad esta web para convertirla a .eot (yo personalmente lo he probado y funciona): kirsle.net

Ahora solo queda la parte del código:

@font-face
{
 font-family: 'miFuenteIE';
 src: url('fuenteIE.eot');
}

@font-face
{
 font-family: 'miFuente';
 src: url('fuente.ttf');
}

body, a
{
 font-family:miFuente, miFuenteIE;
}

Con este código os cubrís las espaldas ante imprevistos por navegadores. Como veis creo 2 "@font-face", no pasa nada, funciona bien, de hecho ví por ahí que en un font-face podías poner varios src, yo no he querido complicarme la vida y lo he dejado más amigable ante el entendimiento propio por si en 2 meses tengo que editar código y me encuentro con éste