Embeber fuentes en CSS3

15/ene/2012 CSS 3 Comentarios
css

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:

  1. @font-face {
  2. font-family: 'NisePico';
  3. src: url('NisePico.ttf');
  4. }

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

  1. .fuente1 {
  2. font: 40px 'NisePico', Arial, sans-serif;;
  3. color:red;
  4. letter-spacing: 0;
  5. text-align:center;
  6. text-shadow: 3px 3px 7px #111;
  7. }

Que asignaremos a la clase de cualquier elemento:

  1. <span class="fuente1">EstO es una fuente NisePicO</span>

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.

Vídeos sobre CSS

Ningún video coincide

Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

3 comentarios en “Embeber fuentes en CSS3”

Víctor Cuervo

Víctor Cuervo

@Ultiminio Ramos Galán,

Si hay una de las cosas por las que me preocupo es por intentar evitar los anglicismos. Aunque hay veces que no lo consigo. Y es verdad que en este caso “incrustar” podría haber sido una buena opción.

Pero embeber, es una de las palabras recogidas por la Real Academia de la Lengua
http://buscon.rae.es/draeI/SrvltConsulta?TIPO_BUS=3&LEMA=embeber

Muchas gracias por el comentario.

Víctor Cuervo

Ultiminio Ramos Galán

Sólo una pequeña observación respecto al uso del castellano. En lugar de usar el anglosajismo “embeber” se puede utilizar la tradución literal “incrustar”. Saludos.

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*


*