feed twitter facebook LinkedIn facebook

CSS » Embeber fuentes en CSS3

enero 15, 2012 por Víctor Cuervo 3 Comentarios Imprimir Imprimir

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.

Visualizar el Codigo
Visualiza el artículo
Descargar el Codigo
Descargar el código
Error en el Codigo
Error en el código
Foro sobre CSS
Foro sobre CSS
tags: , , , , ,

Artículos relacionados:

3 comentarios »

RSS feed para los comentarios de esta entrada. TrackBack URI

  1. Ultiminio Ramos Galán
    mayo 17, 2012 #

    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.

  2. Víctor Cuervo
    mayo 17, 2012 #

    @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.

Deja un comentario

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*