Dentro de CSS3 tenemos la capacidad de embeber nuestras propias fuentes dentro de nuestra página web. Abriendonos 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 Grapgichs (.svg).
Así, nuestra fuente elegida para el ejemplo de embeber fuentes en CSS3 es NisePico.ttf.
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('NisePico.ttf');
}
Ya simplemente podremos utilizar la fuente NisePico dentro de cualquier uso del font en nuestras CSS. Así, por ejemplo, podemos definirnos el siguiente estilo.
.fuente1 {
font: 40px 'NisePico', Arial, sans-serif;;
color:red;
letter-spacing: 0;
text-align:center;
text-shadow: 3px 3px 7px #111;
}
Que asignaremos a la clase de cualquier elemento:
EstO es una fuente NisePicO
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.
