Usa el tipo de letra que quieras en tu sitio

Estos días hablando con mi diseñadora favorita, Ana, hemos cruzado algunas cosas sobre la posibilidad de “incrustar tu fuente” en los sitios web. Ella últimamente hace diseños para algunos hoteles, y estos siempre quieren cosas especiales.

Al final de hablar sobre ello, comenzamos a ver el tema del @font-face del CSS3. Pero, claro está, nos encontramos con el asunto de que no funciona en todos los navegadores. Así que me he puesto a investigar y he encontrado un código, un poco extraño, pero que parece ser la solución a la compatibilidad con todos los navegadores, incluido Internet Explorer.


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Font Face Demo</title>
  <style type="text/css" media="screen">
    @font-face {
      font-family: 'AaarghNormal';
      src: url('Aaargh-webfont.eot');
      src: local('☺'), url('Aaargh-webfont.woff') format('woff'), url('Aaargh-webfont.ttf') format('truetype'), url('Aaargh-webfont.svg#webfont') format('svg');
      font-weight: normal;
      font-style: normal;
    }
    h1 {font: 28px 'AaarghNormal', Arial, sans-serif;}
    p {font: 16px 'AaarghNormal', Arial, sans-serif;}
  </style>
</head>
<body>
  <h1>Font-face de Aaargh Font</h1>
  <p>Aaargh Normal - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>

Para que quede claro que esto funciona, os dejo con la página tal y como se cargaría

Un detalle interesante es el uso de esa “carita sonriente”, y es el parche para que funcione en todos los navegadores, ya que sino en algunos de ellos no funciona… parece ser que gracias a un código en UTF-8 que no es compatible con el navegador de turno hace que el resto no se siga leyendo y por tanto no de un error…

Otra cosa a tener en cuenta es de dónde sacar fuentes en EOT, WOFF, TrueType y SVG. El sitio así que mejor he encontrado se llama Font Squirrel.

3 comentarios en “Usa el tipo de letra que quieras en tu sitio”

  1. Hola Javi…
    Acabo de encontrar tu blog por internet y me encanta!
    Y llegado a este post, pues hay una cosa que no entiendo.
    Los formatos de fuente que mencionas al final, ¿son los únicos válidos?

    Si por ejemplo quiero utilizar un tipo de letra específico, es decir, no compatible con todos los navegadores,¿hay que bajarse los formatos WOFF y EOT del mismo?.

    La verdad que no entiendo muy bien como usar éste método… Te agradecería que me escribieses a mi correo!

    Muchas gracias. Un saludo

  2. Hola!

    A ver, en principio “todos los navegadores” aceptan el WOFF y EOT como formato estándar… el código que yo propongo es el que funciona para cualquier navegador en cualquier versión, de ahí que haya eso de la “carita sonriente”, porque eso es para que funcione en Explorer 6 y similares…

    La recomendación es que, si tu tienes un TTF, lo puedes “subir” al http://www.fontsquirrel.com/fontface/generator y te genera todos los formatos :)

Deja un comentario