Fuentes en web ¿Con cual te quedas?

fuentesweb

No es la primera vez que escribo un post sobre el uso de diferentes fuentes en páginas web, pero recientemente he hablado sobre esto con varias personas y me veía en la necesidad de volver a escribir sobre ello y organizar mejor mis pensamientos. Así que allá voy:

Como norma general, la fuente que indiquemos en nuestra web, tiene que ser una fuente que tenga instalada en su ordenador la persona que acceda a ella. Por eso, estamos limitados a una lista de fuentes muy corta.

Pero por suerte para los diseñadores todos, hoy en día podemos ampliar esta lista de dos formas:

1 – Con el uso de JS combinado con Flash o HTML5.

Con la ayuda de algunas llamadas a javascript podemos conseguir localizar el texto al que queramos aplicar una fuente distinta a las habituales y reemplazar éstos por elementos flash o canvas.

Un ejemplo sería la plataforma Cufón.

Para trabajar con este plugin debes disponer de una fuente en formato .ttf, .otf o .pfb y de su licencia de uso. Desde la propia aplicación web seleccionas la fuente de tu ordenador y se generará automáticamente un archivo de javascript para incluir en tu web.

Cufón trabaja solamente con selectores generales (h1,p,etc), pero nos da la opción de utilizar selectores más específicos (h1.destacado,p:first-child,etc) si incluimos alguno de los frameworks con los que es compatible: jQuery, MooTools, Dojo, etc.

Y aunque es un método fácil y rápido para incluir cualquier fuente en nuestra web y que se vea correctamente en todos los navegadores (IE6 incluido), le encuentro unas cuantas desventajas:
– La propiedad “line-height” funciona sólo si utilizamos un DOCTYPE strict.
– Con mucho texto a transformar, ralentiza la web.
– No permite seleccionar y copiar el texto.

2 – Con la propiedad @font-face de CSS3

Cuando apareció la versión 2.0 de CSS, vino con la propiedad @font-face debajo del brazo aunque poco pudimos disfrutarla ya que los navegadores no se ponían de acuerdo con los estándares a utilizar y en la versión 2.1 dieron marcha atrás y la retiraron hasta el actual CSS3.

Lo que nos permite esta propiedad es poder instalar cualquier fuente en nuestra web, digo instalar porque previamente tendremos que tener el archivo de la tipografía en nuestro servidor y a través de @font-face indicamos la ruta y el nombre con el que la llamaremos. Un ejemplo de uso, sería:

@font-face {
    font-family:'Nombre de la fuente';
    src:url('/ruta/fuente.ttf'), /* safari, firefox */
 	    url('/ruta/fuente.svg') format('svf'), /* iphone, ipad */
    	url('/ruta/fuente.eot') format('eot'), /* internet explorer */
    	url('/ruta/fuente.woff') format('woff'); /* ultimas versiones navegadores */
    	font-weight:normal;
    	font-style:normal;
}
h1 { font:normal 1.2em/1.4em 'Nombre de la fuente',sans-serif; }

Si queremos que sea compatible con varios navegadores, debemos incluir varios formatos para la misma fuente. Os dejo una lista de navegadores y los formatos de fuente que soportan (visto en webfonts.info):

Safari: .ttf, .otf
iPhone/iPad: .svg (hasta iOS 4.1), .ttf (desde iOS 4.2)
Opera: .ttf, .otf, .svg
Internet Explorer: .eot, .woff (desde IE9)
Firefox: .ttf, .otf, .woff (desde 3.6)
Chrome: .ttf, .otf, .woff (desde 6)

El Web Open Font Format (.woff) está en proceso de normalización como recomendación de la W3C y se espera que llegue a ser el único formato de letra reconocido por todos los navegadores.

Hay varias empresas que nos ofrecen la posibilidad de utilizar este método a través de una galería de fuentes instaladas en sus servidores, algunos ejemplos son:

Google webfonts
Typekit
Fontsquirrel

Como conclusión final me quedo con @font-face. Aunque nos lleve algo más de tiempo implementarlo, si se puede hacer con css no veo la necesidad de incluir javascript y abordar el frontend con elementos innecesarios.

Y vosotros ¿Con cual os quedáis?

Actualizo: cssbarcelona me pasa el enlace a una encuesta que hizo en twitter sobre este tema: http://twtpoll.com/r/zxwmti , @font-face se queda en cabeza : )

  • 28 febrero 2011
  • Maquetación
  • ,

8 comments on “Fuentes en web ¿Con cual te quedas?”

    1. Si, el line-height puede llegar a funcionar, pero ya hay que tirar del doctype strict (que tampoco es un problema, aunque si una limitación) o de algún hack y se pierde la comodidad de aplicarlo directamente.. y sobre el texto a copiar, dime algún ejemplo? jeje lo he intentado varias veces y no consigo copiarlo, aunque puede ser según el navegador..

      En lo de la renderización te doy la razón, el suavizado es mejor :D

  1. Mismamente en mi blog cualquiera de los encabezados de la barra lateral. Pero debe ser cosa del navegador eh? Porque estoy ahora probando con Firefox y no parece que chute. En Safari sí que puedo.

  2. La propiedad @font-face resulta un problema para los usuarios con internet explorer 8 o inferior , no podríamos implementarla de alguna manera¿? o si que tira en las versiones previas de éste navegador tan “ameno”?

  3. Está genial tu web/blog :D
    Una pregunta, ¿qué editor de código es tu favorito?, estoy pensando en dar el paso de DW a algún editor pero hay tantos… Tú de DW ni hablar ya no? xD

    Saludos, y enhorabuena por todo tu trabajo!

  4. Definitivamente hay que evitar cufon a toda costa. Ocasiona muchos problemas con el resto de javascript, ralentiza la renderización de la página.

    @font-face funciona perfectamente en todos los navegadores actuales y a parte de las fuentes de google yo uso mucho http://www.fontsquirrel.com tienen bastantes fuentes libres y un generador que te empaqueta .ttf, .otf, .woff, .svg y .eot con su correspondiente css.

Deja un comentario

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