Embeber fuentes en CSS3

Dentro de CSS3 tenemos la capacidad de embeber nuestras propias fuentes dentro de nuestra página web. Abriéndonos a un gran abanico de tipografías y evitando las restricciones de las propias fuentes que vienen definidas en el estándar de CSS. Esto nos dará una gran potencia, ya que simplemente tendremos que generar texto y aplicarles la nueva tipografía gracias a la capacidad de embeber nuestras propias fuentes y no tendremos que recurrir a soluciones como la integración de tipografías con imágenes. Tendremos una página web más ligera.

Lo primero que tenemos que hacer es tener una tipografía. Las extensiones soportadas son TrueType (.ttf), OpenType (.otf) y Scalable Vector Graphics (.svg).

Así, nuestra fuente elegida para el ejemplo de embeber fuentes en CSS3 es NisePico.ttf.

Definir la fuente con @font-face

La regla que tenemos que meter en CSS3 para embeber nuestra fuente es @font-face. Esta regla lo que hace es definir el nombre de nuestra fuente e indicar de dónde se descarga dicha fuente. Así el código será el siguiente:

@font-face {
  font-family: NisePico;
  src: url(fonts/NisePico.ttf);
}

Utilizar la fuente personalizada

Ya simplemente podremos utilizar la fuente NisePico dentro de cualquier uso del font en nuestras CSS. Así, por ejemplo, podemos definirnos el siguiente estilo:

.nisepico {
  font-family: NisePico;
}

Que asignaremos a la clase de cualquier elemento:

<p class="nisepico">Texto con la fuente NisePico</p>

Compatibilidad de navegadores

Aunque embeber fuentes en CSS3 es muy potente, tenemos que tener cuidado en comprobar que los navegadores sobre los que despleguemos nuestro desarrollo tienen capacidad de interpretar el @font-face. El soporte lo podemos encontrar desde Internet Explorer 9, Firefox 6, Chrome 13, Safari 3.2 y Opera 11 en adelante.