CSS3 @font-faceRegla

Ejemplo

Especifique una fuente llamada "myFirstFont" y especifique la URL donde se puede encontrar:

@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9 */
}

Internet Explorer 9, Firefox, Opera, Chrome y Safari soportan la regla @font-face.

Pero Internet Explorer 9 solo admite fuentes de tipo .eot; Firefox, Chrome, Safari y Opera admiten fuentes de tipo .ttf y .otf.

Nota:Internet Explorer 8 y versiones anteriores de IE no admiten la regla @font-face.

Con la regla @font-face, los diseñadores web ya no tienen que usar una de las fuentes "web-safe".

El nombre de la fuente, regla font-face:

El archivo de fuente se encuentra en algún lugar de su servidor; consulte CSS:

Si el archivo de fuente está en una ubicación diferente, use la URL completa:

Ahora está listo para usar la fuente; a continuación se muestra un ejemplo de cómo usarla en todos los elementos div:

div
{
font-family: myFirstFont;
}

font-properties

El siguiente ejemplo muestra la fuente utilizada en div:

div
{
font-family: myFirstFont;
}

@font-face
{
font-properties
}

Descripción de la fuente	Valor	Descripción
font-family	name	Obligatorio. Define el nombre de la fuente.
src	URL	Obligatorio. Define la(s) URL(s) de descarga de la fuente.
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	Opcional. Define cómo se debe estirar la fuente. El valor predeterminado es "normal".
font-style	normal italic oblique	Opcional. Define el estilo de la fuente. El valor predeterminado es "normal".
font-weight	normal bold 100 200 300 400 500 600 700 800 900	Opcional. Define el grosor de la fuente. El valor predeterminado es "normal".
unicode-range	unicode-range	Opcional. Define el rango de caracteres Unicode que admite la fuente. El valor predeterminado es "U+0-10FFFF".