[CSS3] Fuentes tipográficas

Tipografías web en CSS3 - la regla @font-face
Las tipografías web permiten a los diseñadores usar fuentes que no se encuentren en el ordenador del cliente.
Cuando tienes en tu propia tipografía (o te la descargar, como escribiré en otro post, de sitios como Google Font) y la quieres usar, simplemente incluyela en tu servidor web (o haz crea una referencia en el código en el caso de que se encuentre en otro servido) y será descargada automaticamente cuando en el cliente se necesite.
Las tipografias personalizadas se definen con la regla CSS3 @font-face.

Diferentes formatos de fuente
Fuentes TrueType (TTF)
TrueType es un formato de fuente estándar desarrollado a finales de 1980, por Apple y Microsoft. TrueType es el formato de la fuente más común para los sistemas operativos Mac OS y Microsoft Windows.
Fuentes OpenType (OTF)
OpenType es un formato de fuente escalable. Fue desarrollado bajo TrueType, y es una marca comercial registrada de Microsoft. Las fuentes OpenType son comúnmente utilizadas hoy por las principales plataformas informáticas.
El formato de fuente tipográfica abierto web (The Web Open Font Format)(WOFF)
WOFF es un formato de fuente diseñado para usarse en páginas web. Fue desarrollado en 2009, y actualmente es el formato recomendado del W3C. WOFF es esencialmente una tipografía OpenType o TrueType comprimida y metadatos adicionales. El objetivo es fomentar la distribución de las fuentes desde el servidor al cliente, aun teniendo limitado el ancho de banda.
El formato de fuente tipográfica abierto web The Web Open Font Format(WOFF 2.0)
Mejora la compresión de las fuentes TrueType/OpenType con respecto a WOFF 1.0.
Fuentes OpenType incrustadas (Embedded OpenType Fonts)(EOT)
Las fuentes tipográficas EOT son una forma compactada de las fuentes OpenType, diseñado por Microsoft para usarse como fuentes incrustadas en las páginas web.

Un ejemplo rápido:

CSS:

@font-face {
    font-family: myFirstFont;
    src: url(sansation_light.woff);
}

div {
    font-family: myFirstFont;
}



Fuente del articulo: W3S