Fuentes Web CSS

Las fuentes web permiten a los diseñadores web usar fuentes que no están instaladas en el equipo del usuario.

Cuando se encuentran o se compra la fuente que se desea usar, se debe incluir el archivo fuente en el servidor web, y automáticamente se descargarán en el equipo del usuario cuando se necesiten.

La regla @font-face

Las fuentes propias son definidas con la regla @font-face del CSS.

Diferentes formatos de fuente

TrueType Fonts (TTF)

La fuente TrueType es un estándar desarrollada a finales de los años ochenta por Apple y Microsoft. TrueType es el formato de fuente más común tanto para los sistemas operativos Mac OS y Microsoft Windows.

OpenType Fonts (OFT)

La fuente OpenType es un formato para fuentes de computadoras escalables. Fue construida sobre TrueType y es marca registrada de Microsoft. La fuente OpentType es comúnmente usada hoy en día en la mayoría de las plataformas informáticas.

Web Open Font-Format (WOFF)

La fuente Web Open Font-Format es un formato de uso para páginas web. Fue desarrollado en el 2009 y es ahora es una recomendación del W3C. Es esencialmente un OpenType o TrueType con compresión y meta datos adicionales. El objetivo es admitir la distribución de fuentes desde un servidor a clientes a través de una red de ancho de banda.

Web Open Font Format (WOFF 2.0)

Fuentes TrueType o OpenType que proporciona mejor compresión que WOFF 1.0.

SVG Fonts/Shapes

La fuente SVG permite usar glifo SVG cuando se muestra el texto. La especificación SVG 1.1 define un módulo de fuente que permite la ceración de fuentes dentro un documento SVG. También se pueda aplicar CSS a un documento SVG, y la regla @font-face puede ser aplicada a texto en documentos SVG.

Embedded OpenType Fonts (EOT)

Las fuentes EOT son una forma compacto de OpenType diseñado por Microsoft para uso como fuentes embebidas en una página web.

Usar las fuentes que desees

En la regla @font-face se define un nombre para la fuente, como por ejemplo myprimerafuente, y entonces apuntar al archivo de la fuente. Se recomienda solo el uso de letras minúsculas para la URL de la fuente, dado que letras mayúsculas puede obtener resultados inesperados en Internet Explorer.

Para usar la fuente para un elemento HTML, se referencia el nombre de la fuente (miprimerafuente) a través de la propiedad font-family como se muestra en el siguiente ejemplo:

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

Usar Texto en Negritas

Se puede agregar otro regla @font-face que contenga descriptores para texto en negritas como se muestra en el siguiente ejemplo:

@font-face{
  font-family: miprimerafuente;
  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 Sanstation. Los navegadores web usarán esta fuente siempre que una parte del texto con la familia de fuente "miprimerafuente" se deba mostrar en negrita. De esta manera se puede tener varias reglas @font-family para la misma fuente.

Descriptores de Fuentes CSS

En la siguiente tabla se listan los descriptores de fuentes que pueden definirse dentro de la regla @font-face:

Descriptor	Valores	Descripción
font-family	name	Requerido. Define un nombre para la fuente.
src	url	Requerido. Define la URL del archivo de la fuente.
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	Opcional. Define como la fuente debe ser ajustado. 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 negrita de la fuente. El valor predeterminado es "normal".
unicode-range	unicode-range	Opcional. Define el rango de caracteres UNICODE soportado por la fuente. El valor predeterminado es "U+0-10FFFF".