Más y mejores tipografías con @font-face

30/nov/2010 7

Está bien, se están utilizando mucho hoy en día pero @font-face no es una de las nuevas propiedades CSS3; de hecho fue propuesta en CSS2 y ha sido implementada en IE desde su versión 5, aunque lo hicieron en el formato de fuentes propietario (como no, si siempre Microsoft lo hace) Embedded OpenType. Como fueron los únicos en utilizarlo de esa manera, y desde Safari 3.1 los fabricantes de browsers han utilizado TrueType (.ttf) y OpenType (.otf), IE ha tenido que adaptarse desde su versión 7. La especificación de los formatos son:

  • TTF – Funciona en todos los browsers excepto IE y Mobile Safari (iPhone/iPad).
  • EOT – Sólo IE.
  • WOFF – Comprimido y candidato a estándar.
  • SVGMobile Safari (iPhone/iPad).
SafariFirefoxOperaInternet Explorer 6Internet Explorer 7Internet Explorer 8

Esto es simple: primero debes disponer de las fuentes que quieres utilizar, luego las puedes utilizar tal cual o transformarlas a los formatos necesarios. Esas fuentes las importas mediante CSS y las utilizas como una propiedad font-family donde quieras incluirlas. Quizás ya conocías Cufón o SIFr, pero desde que uso @font-face he notado que es bastante más rápido en la carga y es más versátil en su uso (ya que utiliza simple CSS y no depende de llamados JS).

Entonces, primero debes declarar la regla @font-face en tu hoja de estilos para importar las tipografías (nótese la ruta donde las tienes en el servidor, si no estas seguro mejor utiliza algún path absoluto).

@font-face {
   font-family: 'Delicious';
   src: url('Delicious-Roman.otf');
}
   @font-face {
      font-family: 'Delicious';
      font-weight: bold;
      src: url('Delicious-Bold.otf');
   }

Si quieres estar seguro de que se verá en la gran mayoría de los browsers, mejor impórtalas todas:

@font-face {
   font-family: 'Delicious';
   src: url('Delicious-Roman.eot');
   src: local('?'), url('Delicious-Roman.woff') format('woff'), url('Delicious-Roman.ttf') format('truetype'), url('Delicious-Roman.svg#webfont57ztNrX6') format('svg');
}

Y luego las declaras por simple CSS:

h3 { font-family: Delicious, sans-serif; }

Ver demo

Google actualmente está apoyando muchos desarrollos para Chrome y dispone de un importante catálogo de fuentes para su fácil e inmediato uso (y directo desde sus servidores).

Links:

Comentarios

  1. TDP Workspace [#]

    Como siempre excelente material en este sitio hace un tiempo intente hacer trabajar el metodo repasado pero bueno aun las cosas estaban verdes.
    En esa oportunidad de di uso a esta herramienta que quizas ya le han hecho un review pero no esta demas dejar el enlace http://selectivizr.com/ siempre util para solucionar los problemas de Pseudo clases CSS3 en IE.

    Gracias.

  2. fearlex [#]

    Muy bueno, siempre el mejor tip aqui 😀

  3. Niconectado [#]

    Buen post! cuando tuve que trabajar con este elemento me encontré con la sorpresa de IE y el formato EOT, digo sorpresa porque no me lo esperaba y tuve problemas para encontrar la tipografía en ese formato… para mi salvación, dí con esta herramienta de conversión online “TTF a EOT” y les dejo el link a continuación: http://www.kirsle.net/wizards/ttf2eot.cgi

    saludos!

  4. niconectado [#]

    Habrá que esperar la madurez de los motores de renderizado tipográfico en los distintos navegadores para obtener mejores resultados de visualización, sin los desagradables efectos de “alias” o bordes pixelados en las tipografías embebidas.
    Entiendo que esta diferencia es lo que hace que se vean tan bien en un Mac pero tan mal en Windows.

    He visto algunos trucos de anti-alias (text-shadow) usando css, pero hasta ahora ninguno que lo resuelva de buena manera. La configuración ClearType de MS Windows ayuda en algo, pero lamentablemente no es estándar.

  5. Panama foundation [#]

    ….font-face..Permite utilizar tipografas diferentes a las estndar……style type text css media all font-face font-family Delicious src url Delicious-Roman.otf font-face font-family Delicious font-weight bold src url Delicious-Bold.otf style ….font-family Delicious Verdana sans-serif font-size 200 ….

  6. Familias tipográficas web-safe ↝ CSSLab [#]

    […] @font-face que hace un poco más lenta la carga pero como queda en memoria caché funciona de maravilla […]

  7. Conoce cómo funciona el browser y optimiza tu código frontend | CSSLab | Laboratorio de ideas web [#]

    […] loadCSS, una función JavaScript que carga CSS de forma asíncrona, especial para esos pesados @font-face por […]

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab