Como usar fuentes especiales en una web

 
Muchas veces el diseño se tiene que rendir ante el posicionamiento. Es decir, que tenemos que renunciar a tener una bonita cabecera, o a unos títulos, porque están hechas con un tipo de fuente especial que el 90% de los usuarios no tiene (solamente hay una docena de fuentes seguras), y eso nos obligaría a ponerlo como imagen. Y como todos sabemos que las imágenes no indexan tan bien como el texto, renunciamos a ese cambio de diseño. Pues bien, el frotar se va a acabar.

Actualmente existen cinco soluciones en la red para crear títulos con fuentes especiales, aunque el usuario no la tenga descargada en su ordenador. Se trata de @font-face, siFR, FIR, TypeFace.js, y Cufón. Examinemos las posibilidades una a una:

1. @font-face:

Logo @font-faceImplementado por la W3C, las propiedad @font-face se aplica a los CSS de forma que se puede añadir el archivo original de la fuente, que el usuario se descarga automáticamente en el momento de ver la web. Actualmente solo lo soporta Safari, y Explorer para las fuentes EOT (no TTF), y se comenta que próximamente lo hará Opera y Firefox.

Los puntos fuertes es que la implementación es facilísima, ya que solamente se deben definir los estilos. Los puntos negativos son que aún no funciona en la mayoría de navegadores, y que existen problemas de copyright de las fuentes, ya que el usuario puede tener acceso al código fuente.

2. sIFR:

Logo SifRLas siglas de Scalable Inman Flash Replacement. Es una tecnología que te permite cambiar textos específicos por Flash. Este sistema sustituye cualquier elemento de texto, con el tipo de letra que sea, por un Flash que permite a los usuarios ver cualquier tipo de fuente, aunque no la tengan instalada, ya que queda incrustada en el Flash.

sIFR requiere JavaScript y Flash para funcionar correctamente. En caso que no se cumplan estas dos condiciones, se mostrará el texto a través del estilo que se haya definido en el CSS. Veamos un ejemplo aquí, donde el título del post es un Flash, como podemos comprobar si hacemos clic con el botón derecho del mouse encima del mismo.

Los puntos fuertes del sIFR son que el texto se puede seleccionar, y que puedes añadir muchos tipos de efectos. Los puntos débiles son, aparte de su lentitud de carga, que requieren JavaScript y Flash. Además, si no eres un desarrollador con un nivel medio de conocimientos, la implementación se te puede hacer difícil. Así pues, no lo recomiendo.

3. FLIR / facelift

Logo de faceliftLas siglas de Face Lift Image Replacement. Este sistema trabaja a través de la tecnología PHP, y la libredia GD. Renderiza las fuentes en el servidor, y las publica como imágenes.

La parte positiva de esta opción es que no es necesaria ninguna tecnología aparte de PHP, y que la fuente queda perfectamente mostrada como imagen. La parte negativa es que una vez más, tenemos una imagen que se tiene que cargar, un proceso lento, y además no se puede seleccionar el texto. Así pues, no lo recomiendo.

4. typeface.js

Logo typeface.jsLa tecnología typeface.js le indica al navegador (y no al servidor) que debe redibujar la fuente a través de VML (Vector Markup Language) en el caso de Explorer, y a través de HTML5 para navegadores más avanzados. Actualmente solo soporta fuentes TTF.

A través del dibujo vectorial cargamos las fuentes a una velocidad mucho más rápida que las versiones que utilizan imágenes o Flash. La parte positiva de este método es es mucho más rápido que los sistemas de remplazo por imágenes o Flash. La parte negativa es que se requiere JavaScript, y que solamente funciona con TTF y en ciertos navegadores (más detalles sobre esto más adelante).

5. Cufón

Logo cufónCufón es, a mi entender, una versión mejorada de typeface.js, en la que han mejorado la facilidad de implementación. El script ocupa menos que el caso de typeface, comprime más la fuente, funciona en más navegadores, y acepta más tipos de fuente (TTF, OTF, PFB y PostScript). Para una comparativa exhaustiva entre los dos sistemas, recomiendo la lectura de Kilian Walkhof “Cufón Vs. Typeface.Js, Which One Is Better?” donde entra en detalles, e incluso tiene una comparativa de renderización entre typeface.js y Cufón.

Los puntos fuertes de Cufón son la rapidez de carga comparado con SIFR y FLIR, pues simplemente utiliza JavaScript y nada más. Solamente tiene el handicap que debes utilizarlo con fuentes que te den permiso, y que no se puede seleccionar el texto. No solamente lo recomiendo, sino que además lo utilizo en mi web. Concretamente en el encabezado y los títulos de los posts.

6. La mejor solución

Así pues, aquí quedan las 5 soluciones básicas para poder mostrar fuentes especiales en cualquier página web. Pero queda un as en la manga. Que pasa si queremos lo mejor de los dos mundos? En caso que lo que queráis es maximizar la rapidez con la compatibilidad, hay una solución mixta que es más que buena. Veamos como:

Se trata de combinar Cufón y @font-face mediante un poco de programación. La idea está en:

1. Comprobar primero si el usuario tiene la fuente ya en su ordenador. En tal caso, la mostramos tal cual.

2. En caso que no la tenga, si el navegador soporta @font-face, utilizaremos este sistema por CSS.

3. Finalmente, si el usuario no tiene la fuente, ni soporta @font-face, Cufón entrará en juego.

Simple, ¿verdad? Esto se puede lograr mediante una simple estructura de if y else. Para todos aquellos que no sean unos cracks de la programación (entre los cuales me incluyo yo), aquí tienen el proceso paso a paso.

Bien, pues aquí queda todo. Espero que os sea de alguna utilidad. Si conocéis de algún otro método para mostrar fuentes alternativas, o podéis añadir alguna información que me haya dejado en el tintero, dejad un comentario, que siempre son bienvenidos! ;)

Comentarios

  1. alex zamora dice

    hey muchas gracias por la información
    me servirá de mucho para mi sitio web en construcción
    éxito en su proyecto !!

  2. Sergio dice

    Muy interesante, muchas gracias.
    He comprobado que hay gente que tiene desactivada la opción de descarga de Fuentes en el Explorer, en ése caso evidentemente no baja la fuente y se ve mal.
    ¿Sabes si hay alguna manera de detectar ésa opción de configuración por javascript para en ese caso usar cufón?

Deja un comentario