Cómo insertar una fuente web mediante @font-face

Artículo donde se explica cómo añadir de forma correcta una fuente web mediante css usando la regla @font-face para que funcione, incluso, en el Explorer.

botero

archivado en: HTML/CSS / 9 septiembre, 2012

En el artículo anterior explicaba cómo incorporar una fuente a una web empleando Google Fonts. Es una forma muy cómoda, pero también existe otra más ortodoxa y es una regla de CSS llamada @font-face.

En teoría, debería ser muy fácil de usar. Se sube la fuente al servidor y en el archivo CSS se escribe algo así:

@font-face {
font-family: nombre de la fuente;
src: url(url de la fuente);
}

Por ejemplo:

@font-face {
font-family: TravelingTypewriter;
src: url(TravelingTypewriter.ttf);
}

Y para usarla basta con poner su nombre, sin comillas, como cualquier otro valor de font-family

p {
font-family: Gentium, serif;
}

Ahora bien, hay que hacer algún apañejo para que funcione correctamente o, mejor dicho, para que funcione en el Explorer, un navegador con menos capacidad de interpretar las CSS que una tostadora asilvestrada :mrgreen:.

Como sabes, hay varios tipos de fuentes para web:

  • woff - Web Open Font Format (.woff)
  • truetype (.ttf)
  • opentype (.otf, ttf)
  • embedded-opentype (.eot)
  • svg (.svg, .svgz)

Prácticamente, el Explorer solo es capaz de interpretar las fuentes embedded-opentype (.eot), que es un formato OpenType para Internet diseñado por Microsoft y, claro, solo funciona en este desastre de navegador. Aunque resulta muy tentador olvidarse de cómo se vean las cosas en el Explorer, todavía es muy popular, por lo que no queda más remedio que buscar una solución que se adapte a cada caso.

En teoría, según las especificaciones de la W3C, debería bastar con ir añadiendo urls con los distintos formatos separados por comas. Si un navegador no es capaz de interpretar el primero, debería pasar al segundo y así hasta que coja uno.

External references consist of a URI, followed by an optional hint describing the format of the font resource referenced by that URI. The format hint contains a comma-separated list of format strings that denote well-known font formats. Conformant user agents must skip downloading a font resource if the format hints indicate only unsupported or unknown font formats. If no format hints are supplied, the user agent should download the font resource.

Lo cual, incluida una ñapa para el explorer, quedaría así, por ejemplo:

@font-face {
font-family: 'thebit';
src: url('fonts/futuran-webfont-webfont.eot');
src: url('fonts/futuran-webfont-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/futuran-webfont-webfont.woff') format('woff'),
url('fonts/futuran-webfont-webfont.ttf') format('truetype'),
url('fonts/futuran-webfont-webfont.svg#futura_bk_btbook') format('svg');
}

Luego ya basta con usar la propiedad font-family.

font-family: thebit, Verdana, Arial, Helvetica, sans-serif;

Una cosa más para terminar, por lo general, las fuentes que manejamos suelen ser ttf y otf. Para convertirlas a eot y demás hay varias aplicaciones on line. Una muy completa es @font-face generator de Font Squirrel; otra que funciona muy bien es la aplicación de Kirsle.net.

Notas

Formatos de fuentes que soportan los navegadores según webfonts.info.

Navegador woff eot ttf/otf svg
IE 10 no
IE 9 no no
IE 8 no no no
IE 7 no no no
IE 6 no no no
Firefox 4-14 no
Safari 6 no no no
Chrome 20 no
Opera 11 no no no

|| Tags: , , , ,

valoración de los lectores sobre Cómo insertar una fuente web mediante @font-face

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración negativa
  • 4 sobre 5 (87 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

7 respuestas a “Cómo insertar una fuente web mediante @font-face

  1. Renzo el dijo:

    Hola me encanta la fuente que usas aqui, que es la futura, copio tu codigo en mi css y nada. La quiero subir a mi blog de blogger para usarla ahi. Debe de ser por la url, me explicas bien eso de como subir las fuentes a un servidor(tengo cta en dropbox). Intente convertir en fonts squirrel y me botaba archivos en js y un bloc de notas con codigo css, ayudame gracias.