Thader Consultores

@font-face sólo requiere unas cuantas líneas de código CSS, sin usar herramientas externas ni nada más. Lo primero que se necesita es tener el archivo de la fuente, en este caso tendremos la fuente Quicksand.otf, que descargamos y subimos a nuestro servidor. El código para poder usarla es:

@font-face {
    font-family: Quicksand;
    src: url('fonts/Quicksand.otf');
} 

Este código le da un identificador a la fuente para poder ser usada en el resto de nuestro CSS. Esa es la primera línea, la segunda establece la URL donde está el archivo con la fuente, en este caso en nuestro servidor en la carpeta fonts. A partir de aquí puedes usar la fuente donde se quiera como se haría normalmente:

font-family: Quicksand, Georgia, “Times New Roman”, serif;

Recordad que el navegador usará la primera fuente, y si esta no se puede usar por cualquier motivo, lo intentará con las siguientes.

Esto debería ser todo lo necesario para poder usar cualquier tipo de fuentes en nuestra web, pero no es así. Todos los navegadores modernos entienden el comando @font-face, pero el problema es que no todos los navegadores trabajan con los mismos tipos de archivos de fuentes. Unos, como Firefox, entienden el formato .otf, mientras que Internet Explorer entiende .eot. Además, cada navegador o sistema operativo puede mostrar las fuentes de forma un poco distinta unos de otros. Ante esta disparidad hay que configurar nuestro CSS con @font-face con una serie de parámetros en mente:

@font-face {
    font-family: 'Quicksand';
    src: url('Quicksand.eot'); /* IE9 Compat Modes */
    src: url('Quicksand.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('Quicksand.woff') format('woff'), /* Modern Browsers */
         url('Quicksand.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('Quicksand.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Esto lo que hace básicamente es hacer que IE comprenda la primera línea y no siga cargando formatos. Para los demás navegadores, cada uno entenderá el suyo y no cargará la fuente correspondiente. Para una mejor explicación de esta “receta” podéis leer el post original en Fontspring.

Podéis conseguir fuentes gratuitas para usos comerciales en Font Squirrel, donde también tienen un utilísimo generador de los distintos formatos de fuetnes para @font-face a partir de un archivo.