La regla CSS @font-face

Las fuentes web permiten a los diseñadores usar fuentes que no están instaladas en la computadora del usuario. Cuando hayas encontrado/comprado la fuente que deseas usar, simplemente incluye el archivo de fuente en tu servidor web y se descargará automáticamente al usuario cuando lo necesite.

Tus propias fuentes son definidas en la regla CSS @font-face.

Diferentes formatos de fuentes

Fuentes TrueType (TTF)

TrueType es un estándar de fuente desarrollado a fines de la década de 1980 por Apple y Microsoft. TrueType es el formato de fuente más común para los sistemas operativos Mac OS y Microsoft Windows.

Fuentes Opentype (OTF)

OpenType es un formato para fuentes de computadora escalables. Fue construido en TrueType y es una marca registrada de Microsoft. Las fuentes OpenType se usan comúnmente hoy en día en las principales plataformas informáticas.

El formato Web Open Font (WOFF)

WOFF es un formato de fuente para usar en páginas web. Fue desarrollado en 2009 y ahora es una recomendación del W3C. WOFF es esencialmente OpenType o TrueType con compresión y metadatos adicionales. El objetivo es admitir la distribución de fuentes desde un servidor a un cliente a través de una red con restricciones de ancho de banda.

WOFF 2.0.

Fuente TrueType/OpenType que proporciona una mejor compresión que WOFF 1.0.

SVG

Las fuentes SVG permiten usar SVG como glifos al mostrar texto. La especificación SVG 1.1 define un módulo de fuente que permite la creación de fuentes dentro de un documento SVG. También puede aplicar CSS a documentos SVG y la regla @font-face se puede aplicar al texto en documentos SVG.

Fuentes Embedded OpenType (EOT)

Las fuentes EOT son una forma compacta de fuentes OpenType diseñadas por Microsoft para su uso como fuentes incrustadas en páginas web.

Usar la fuente que deseas

En la regla @font-face; primero define un nombre para la fuente (por ejemplo, myFirstFont) y luego apunta al archivo de fuente.

Sugerencia: utiliza siempre letras minúsculas para la URL de la fuente. Las letras mayúsculas pueden dar resultados inesperados en IE.

Para usar la fuente para un elemento HTML, consulta el nombre de la fuente (myFirstFont) a través de la propiedad font-family.

Ejm

<!DOCTYPE html>
<html lang="es">
<head>
<style>
@font-face {
	font-family: myFirstFont;
	src: url(sansation_light.woff);
}

* {
	font-family: myFirstFont;
}
</style>
</head>
<body>
<h2>La regla @font-face</h2>
<div>
Con CSS, los sitios web pueden usar fuentes distintas a las fuentes
 "seguras para la web" preseleccionadas.
</div>
</body>
</html>

Usando texto en negrita

Debe agregar otra regla @font-face que contenga descriptores para texto en negrita.

Ejm

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

El archivo "sansation_bold.woff" es otro archivo de fuente que contiene los caracteres en negrita para la fuente Sansation. Los navegadores usarán esto siempre que un fragmento de texto con la familia de fuentes "myFirstFont" deba mostrarse en negrita. De esta manera, puedes tener muchas reglas @font-face para la misma fuente.

Resumen

Descriptor Valores Descripción
font-family nombre Requerido. Define un nombre para la fuente
src URL Requerido. Define la URL 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 cómo se debe diseñar la fuente. El valor predeterminado es "normal"
font-weight
  • normal
  • bold
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
Opcional. Define la negrita 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"