La declaración @font-face

facebook-svg gplus-svg twitter-svg

La declaración @font-face nos permite utilizar fuentes personalizadas, como por ejemplo las que podemos importar de fontsquirrel.com o de otros sitios como:

La sintaxis utilizada es muy parecida a la de @mediaquery o de @keyframes. Una regla que define las fuentes a utilizar empieza con la palabra clave @font-face.

@font-face{
      font-family: "Fuente Encabezados Grandes";
      src: url('ruta/carpetas/fuente.woff') format('woff');
  }

La primera parte de la declaración: font-family: "Fuente Encabezados Grandes" define el nombre de la fuente, que puede ser cualquier cosa. En este caso la llamamos "Fuente Encabezados Grandes" porque la queremos utilizar para los encabezados grandes, pero la podemos llamar como queramos. Utilizamos este nombre para establecer el tipo de fuente de los encabezados ( en este caso ):

h1{ font-family: "Fuente Encabezados Grandes", sans-serif;}

El atributo src, indica, como sabemos, donde se encuentra alojada la fuente. La ruta puede ser hacia una carpeta local o hacia una fuente externa como por ejemplo en el caso de las fuentes de Google

@font-face{
      font-family: "Fuente Encabezados Grandes";
      src: url('ruta/carpetas/fuente.woff') format('woff');
  }

En lo que concierne el formato utilizado, en este caso utilizamos woff – el acrónimo de Web Open Font Format, un formato desarrollado por Mozilla.

El soporte para fuentes 'woff' es muy bueno y casi bastaría con esto, pero la declaración @font-face soporta atributos src múltiples, y generalmente las fuentes que podemos descargar por ahí vienen en varios formatos para una mejor compatibilidad con los demás navegadores. Así que una declaración @font-face puede tener este aspecto:

@font-face{
     font-family: "Fuente Encabezados Grandes";
     src: url('ruta/carpetas/fuente.eot') format('eot');
     src: url('ruta/carpetas/fuente.eot?#iefix') format('eot'),
          url('ruta/carpetas/fuente.woff') format('woff'),
          url('ruta/carpetas/fuente.ttf) format('truetype'), 
          url('ruta/carpetas/fuente.svg) format(svg);
      font-weight: normal;
      font-style:normal;
}

Veamos uno por uno los formatos utilizados:

El formato .eot ( Embedded Open Type ) fue desarrollado por Microsoft y es el único formato reconocido por los navegadores de tipo IE8 y más antiguos.
Al escribir la declaración @font-face tenemos que hacerlo de tal manera, que cada navegador encuentre el formato que necesita.
Empezamos utilizando el formato .eot y lo ponemos como único valor del atributo src.

src: url('ruta/carpetas/fuente.eot') format('eot');

 A continuación escribimos esto:

src: url('ruta/carpetas/fuente.eot?#iefix') format('eot'),
          url('ruta/carpetas/fuente.woff') format('woff'),
          url('ruta/carpetas/fuente.ttf) format('truetype'),
          url('ruta/carpetas/fuente.svg) format(svg);

El pequeño parámetro URL, destacado arriba en rojo, hará que los navegadores de tipo IE antiguos ignoren el resto de la declaración. A continuación viene el formato woff ( Web Open Font Format ) soportado por la mayoría de los navegadores modernos incluso IE > 8. También hay los formatos .ttf ( TrueType Font ) y .otf ( OpenType Font) muy interesantes sobre todo para los tipógrafos, y el formato .svg ( Scalabe Vector Graphics ) para Safari móvil.

Este es también el formato recomendado por fontsquirrel.com.

@font-face{
              font-family: "Fuente Encabezados Grandes";
              src: url('ruta/carpetas/fuente.eot') format('eot');
              src: url('ruta/carpetas/fuente.eot?#iefix') format('eot'),
                   url('ruta/carpetas/fuente.woff') format('woff'),
                   url('ruta/carpetas/fuente.ttf) format('truetype'), 
                   url('ruta/carpetas/fuente.svg) format(svg);
              font-weight: normal;
              font-style:normal;
  }