sIFR | Facelift | Typeface | Cufon | @font-face | 5 formas de usar la fuente que quieras en tu web

A la espera de que la propiedad de CSS3 @font-face sea implementada por todos los navegadores, se proponen alternativas para poder usar el tipo, la fuente, que queramos en nuestro sitio web.

El más popular es sIFR, del que ya hablamos en este tutorial y del que surgen proyectos paralelos como el interesante Font Burner pero no es la única técnica, que yo conozca hay 5:

  1. sIFR | Tutorial | Tutorial en TodoWordPress | plugin jQuery | plugin para WordPress | Generador | Font Burner (Font Burner Control Panel)
  2. Facelift Image Replacement | Artículo
  3. Typeface.js: Generador | Artículo
  4. Cufon | WP-Cufon | Tutorial
  5. @font-face

Cufon es la última que he incorporado a esta lista, tiene la misma utilidad pero su uso es más sencillo, desde su web generas el archivo de la fuente y descargas los javascripts personalizados con las opciones que decidas. El texto se reemplaza por una imagen PNG, puedes ver un ejemplo y un tutorial en los títulos de los posts de Tinnta, el texto de la etiqueta h2 es reemplazada por PNGs

img flickr ceslava001 sIFR | Facelift | Typeface | Cufon | @font face | 5 formas de usar la fuente que quieras en tu web

Si utilizas WordPress y prefieres utilizar un plugin, WP-Cufon hará todo menos generar el archivo de la fuente. En Eliseos.net tenéis un tutorial en español sobre cómo utilizar este plugin.

Vídeos de Proyecto-F explicando el funcionamiento de typeface y de cufon

Cuestiones y Cuestionario

  1. ¿Conoces alguna técnica más?
  2. ¿Crees que merece la pena aumentar el peso de la página y la pérdida de accesibilidad / usabilidad para mostrar una fuente no de sistema? Mirad los comentarios y el debate de Elias y Skeku en este post.
  3. De no utilizar estas técnicas ¿Cuál crees que es el mejor tipo de letra para web? ¿Y el peor?

Añade tu propio comentario | 1 Comentario

  1. Trackbacks/Pingbacks/Retweets

    1. sIFR | Facelift | Typeface | Cufon | @font-face | 5 formas de usar la fuente que quieras en tu web: A la espera .. http://bit.ly/13PNCK

    2. [...] hay otras opciones para usar una fuente no de sistema (eCSStender, sIFR | Facelift | Typeface | Cufon | @font-face ) para los que seguimos usando CSS2.1 sin ninguna ayuda extra podemos consultar estas estadísticas [...]

    Danos tu opinión:

# pqpq.es


  • # Capitalismo vs. Comunismo
  • efectivo-tarjeta
    Dos ideologías opuestas, dos formas de entender la política, la sociedad y la economía. Sugerido por anónimo

  • # ¿Tiene edad el amor?
  • edad-amor
    ¿Crees que la diferencia de edad no es un impedimento para mantener una relación? ¿Compartes la frase "El amor no tiene edad"?

# Cursos v2b | Demo

    # Adobe Live Services CS5
  • Productividad colaborativa online

    liveservices Adobe Live Services CS5

    Productividad, colaboración, tiempo real, online… son algunos de los conceptos detrás de la familia Adobe CS Live, con la que ahorrarás tiempo, dinero y esfuerzo al tener la capacidad de conectarte con colegas, clientes, jefes o amigos para realizar y revisar tus proyectos. O, por otro lado, administrar, generar, monitorear o previsualizarlos por ti mismo. No importa a qué te dediques, desde el diseño hasta el desarrollo web, el guionismo o el desarrollo de contenido para dispositivos móviles, Adobe CS Live tiene un servicio para ti.

     Adobe Live Services CS5

  • # Adobe Illustrator CS5
  • Curso online integral

    aics5 Adobe Illustrator CS5

    Illustrator es sin dudas la aplicación más potente hoy en día en cuanto a creación vectorial profesional se refiere. Provee a diseñadores, ilustradores, artistas, profesionales y entusiastas de herramientas poderosas para generar gráficos precisos, funcionales y hermosos.´Para impresos, sitios web, animaciones, interactivos, vídeos; sin importar el soporte o el dispositivo de consumo, Illustrator se convierte en la aplicación base que no puede faltar en tu repertorio de conocimientos.

    41.48 €

     Adobe Illustrator CS5