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.
Deja una respuesta