Qué es sIFR o como incluir cualquier fuente en una web

arial

Uno de los problemas más grandes a la hora de diseñar una página web es la limitación con la tipografía, pues a los diseñadores les gusta mucho jugar con las fuentes y tener que utilizar sólo “dos o tres” les deja con la cara larga.

¿Por qué no se puede usar cualquier fuente en una web?
Cuando indicas en el estilo de tu página la familia de la fuente a utilizar para el texto, lo que estás haciendo es una llamada a un archivo del ordenador desde el que se está viendo la web. Por lo que si el usuario en ese momento no tiene instalada esa fuente, no podrá visualizar la página correctamente, y verá el texto con distinto tamaño o las lineas estarán superpuestas.

¿Qué fuentes podría utilizar en mi página web?
Por esta razón se suelen usar fuentes genéricas, es decir, que vienen instaladas por defecto en todos los sistemas operativos. Cómo son: Arial, Times, Tahoma, Verdana, Courier New, o definir directamente un grupo al que pertenecen: san serif (sin serifa – como Arial) o serif (con serifa – como Times New Roman).

Yo no me conformo, quiero meter otra fuente en mi web.
Gracias a Dios Shaun Inman, hace un par de años nació scalable Inman Flash Replacement (sIFR), un script que se encarga de modificar las fuentes de los textos que queramos, pasándolas de html a flash. Utiliza conjuntamente Javascript y Flash, y consigue que no se aprecie la diferencia con un texto escrito en html, ya que se imprime sin problema y se puede seleccionar y copiar con la misma facilidad.

¡Me lo quedo! Pero.. ¿Cómo lo puedo implementar en mi web? ¡Que sea facilito!
Para eso tenemos la web Font Burner donde nos muestran un listado con todas las fuentes disponibles, simplemente haz clic sobre la que elijas y te aparecerá un código para copiar y pegar.
Ese código debemos pegarlo entre las etiquetas <head></head> de nuestra página, son enlaces a archivos css y js (alojados en font burner, por lo que no tendrás que copiarlos en tu servidor) que harán el trabajo por ti.
Por defecto, te modifica la fuente de los titulos (h1, h2, h3, h4, h5, h6), pero si quieres modificar otro texto lo que tienes que hacer es envolverlo en un div cuya clase sea el nombre de la fuente elegida.

En el caso de que el usuario no tuviera activado ni Flash ni Javascript en su navegador, se vería la fuente indicada en el css, no habría ningún problema.
Yo aconsejo no poner todo el texto con este método ya que saturaríamos el servidor haciendo llamadas a cada flash (un flash por titulo, o div) y haría que nuestra web tardase más en cargar (hay gente que se desespera con esto, yo incluida). Pero usándolo con sensatez puede quedar genial.

Lo dicho, ya podéis jugar con este nuevo recurso :)

  • 29 marzo 2009
  • html
  • , , ,

2 comments on “Qué es sIFR o como incluir cualquier fuente en una web”

Deja un comentario

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