CSS3 - @font-face

Puede que desde mi archivo hoja de estilo, ponga cierta fuente tipográfica a mis títulos y desde mi máquina se vea genial. Pero, y desde otra máquina? Puede que no se vea tan genial jeje. Porque si esa fuente no está instalada en el sistema cliente, éste no lo verá y lo reemplazará por una que sí tenga instalada.

CSS3 tiene una propiedad especial para que los diseñadores web puedan utilizar cualquier fuente indpendientemente de si está o no está instalada en la máquina cliente.

@font-face se llama la propiedad y permite utilizar una fuente referenciando su ubicación la cual puede estar subida a nuestro servidor web o a un servidor externo.

La fuente tipográfica puede estar en distintos formatos:

Embedded OpenType (EOT)

True Type (TTF)

Open Type (OTF)

Web Open Font (WOFF)

No todos los navegadores soportan el mismo formato, por tanto, podés tener una misma fuente con diferentes formatos y describirlos en tu hoja de estilo. Checa más abajo cómo listo los diferentes formatos.

Cómo usar la directiva @font-face

@font-face {
 font-family: "AltamonteNF";
 font-style: normal;
 font-weight: normal;
 src: url("/fonts/AltamonteNF.ttf") format("truetype"),
 url("/fonts/AltamonteNF.woff") format("woff"),
 url("/fonts/AltamonteNF.eot") format("embedded-opentype");
}

body {
        background: #333333;
        font-family: AltamonteNF;
        font-size: 24pt;
        color: #ffffff;
}

Se vería así:

Podés descargarte gratuitamente fuentes tipográficas compatibles con @font-face en http://www.creamundo.com/ y http://www.fontsquirrel.com