Incluir fuentes en CSS con @font-face

Uno de los primeros pasos para implementar una web es configurar la tipografía o fuente a utilizar, esto se realiza con la propiedad font-family de CSS. El problema es que la fuente debe estar instalada en el dispositivo del usuario de lo contrario se mostrará la fuente por defecto del navegador.

Declarando fuentes

Para declarar fuentes personalizadas se utiliza la regla @font-face de CSS, en la declaración de la fuente se utilizan las propiedades:

font-family: define el nombre de la fuente.
src: define la ruta del archivo y el formato de la fuente.
font-style: define el estilo de la fuente (normal, italic, oblique).
font-weight: define el grosor de la fuente (normal, bold, bolder, lighter).

Veamos un ejemplo básico para declarar una fuente:


@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: normal;
}

Tipos de archivos para fuentes

Existen varios formatos de fuente utilizados en web:

.ttf: uno de los formatos de fuente más antiguos, soportado por navegadores modernos incluyendo IE9+.
.woff: formato que incluye compresión de archivos por lo que ocupa menos espacio que el formato .ttf, soportado por navegadores modernos incluyendo IE9+.
.woff2: evolución del formato .woff que incluye mejoras en la compresión de archivos, soportado por navegadores modernos exceptuando IE.
.eot: formato de fuente creado por Microsoft y sólo soportado por IE6+.

Con esta información se recomienda: utilizar el formato .woff2 por su compatibilidad y tamaño de archivo seguido del formato .woff para dar soporte a IE9+.


@font-face {
  font-family: 'Open Sans';
  src: url('fonts/opensans-regular.woff2') format('woff2'),
    url('fonts/opensans-regular.woff') format('woff');
  font-style: normal;
  font-weight: normal;
}

Si no tienes la fuente en el formato adecuado puede utilizar Webfont Generator – Font Squirrel para convertir tus archivos de manera sencilla.

Declarar fuentes con variaciones

En ocasiones es necesario incluir una fuente con sus variaciones (bold, italic, etc), se pueden utilizar diferentes nombres para cada una de las fuentes, pero también se puede utilizar el mismo nombre pero con diferente font-weight o font-style.


@font-face {
  font-family: 'Open Sans';
  src: url('fonts/opensans-light.woff2') format('woff2'),
    url('fonts/opensans-light.woff') format('woff');
  font-style: normal;
  font-weight: 300;
}

@font-face {
  font-family: 'Open Sans';
  src: url('fonts/opensans-regular.woff2') format('woff2'),
    url('fonts/opensans-regular.woff') format('woff');
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: 'Open Sans';
  src: url('fonts/opensans-bold.woff2') format('woff2'),
    url('fonts/opensans-bold.woff') format('woff');
  font-style: normal;
  font-weight: 700;
}

Notar que hemos expresado el grosor de las fuentes en números, esto es útil cuando se tienen multiples variaciones de la misma fuente y se quiere evitar confusión con los nombres del grosor:

300 → light
400 → normal
700 → bold

Recomendaciones

El uso de gran cantidad de fuentes es una misma web incrementa la cantidad de archivos a descargar con una disminución en la velocidad de descarga.
Se recomienda el uso del formato .woff2 que es ligero y tiene amplio soporte en navegadores y es de licencia abierta.
Tener cuidado al utilizar fuentes, hay fuentes comerciales que requieren comprar licencias para utilizarlas.
Utilizar el formato .eot sólo cuando se requiere dar soporte a versiones antiguas de Internet Explorer.