Tipos de letras en HTML

Añadir tipos de letras en las páginas web con CSS @font-face

Una de las novedades más interesantes de HTML 5, a parte de la introducción del elemento Canvas, transiciones CSS 3 y reproducir vídeos de forma nativa, es la introducción de soporte para fuentes o tipos de letras. Hasta ahora,  las tipografías que se podían usar eran las que el usuario tenía instaladas en su sistema. Cierto es que existía algun método alternativo como el uso de Cufon, pero se requiere javascript  y el método es un poco más engorroso.

Font Face

Con la introducción del elemento @font-face en CSS, tan sólo hay que añadir estas líneas en los archivos de estilo:

@font-face {
  font-family: 'Cabin';
  src: url('/Cabin-Regular.otf') format("opentype");
}

Con estas líneas definimos el archivo del tipo de letra que usaremos y la ruta donde se encuentra. En ese caso en la carpeta principal desde donde se llama la página HTML. Luego podemos definir el formato de forma opcional, ya sea opentype o true type principalmente.

Luego para usar la letra en algun estilo de la web solo debemos añadir el parámetro font-family en el elemento en cuestión, por ejemplo, si deseamos que los encabezamientos la utilicen podemos hacer:

h1 {
  font-family: 'cabin';
}

Este método es compatible con todos los navegadores nuevos que soporten HTML 5

Fuentes WOFF

Aunque como hemos visto en el ejemplo anterior se pueden cargar tipos de letras true type o opentype, estas no estan optimizadas ni comprimidas para usarse en la web. Por ello, la W3C definió un estándar de tipo de letra llamado WOFF (Web Open Font Format) en el que se busca reducir al máximo el ancho de banda de este tipo de archivo.