Sucede mucha veces que cuando estamos diseñando nuestros sitios queremos darle a los titulos un estilo de fuente que no es del sistema y que en consecuencia el usuario que visita el sitio si no tiene esa fuente instalada va a ver ese titulo (o el elemento que fuera) con una fuente 'normal' lo cual hace que el sitio pierda el diseño original, a continuación te damos un tip para que puedas utilizar cualquier tipo de fuente en tus diseños webs sin utilizar imagenes, ni saliendose de los estandares webs.

La solución se llama SIFR (Scalable Inman Flash Replacement) ¿Que es SIRF y como funciona? SIFR es una mezcla de tecnologías (CSS, Flash y Javascript) que reemplaza el texto de la etiqueta indicada (<h1>, <p>, etc) por un archivo .SWF (Flash) que contiene embebida la fuente que queremos utilizar.

Click aquí para ver el ejemplo.

¿Como creamos el archivo SWF con la fuente embebida?

Antes que nada tenes que descargar el SIFR

Cuando descomprimamos el ZIP vamos a ver un archivo fuente del Flash "sifr.fla", buscamos dentro de la librería el item font y le indicamos la fuente que queremos utilizar, luego debemos exportar nuestro movie flash en formato Flash 6.

Bien esta aquí ya tenemos el SWF con la fuente que queremos utilizar.

NOTA: El paquete SIFR trae unos SWF ya creados si nos gustan esas fuentes podemos utilizar esos archivos.

¿Como funciona?

Lo primero que tenemos que hacer es dentro de la etiqueta HEAD insertar dos hojas de estilo...

<link rel="stylesheet" href="sIFR-screen.css" type="text/css" media="screen" />

<link rel="stylesheet" href="sIFR-print.css" type="text/css" media="print" />

Estos CSS los utiliza el Javascript que vamos a agregar a continuación para hacer la transformación. Ahora insertemos el Javascript que hace la "magia" ...

<script src="sifr.js" type="text/javascript"></script>

Aclaremos que así como lo escribimos los archivo deben estar en el mismo directorio que la pagina HTML. Bien, ahora creemos la etiqueta con el texto que tendrá la fuente que creamos anteriormente, para esto solo basta agregar dentro del body de nuestra pagina la etiqueta HTML sin nada raro, como hacemos siempre...

<h1>Hola este es un ejemplo de SIFR</h1>

Y ahora para hacer que ese texto salga con la fuente que queremos tenemos que agregar al final de la pagina, antes de cerrar el body (</BODY>) el siguiente código...

<script type="text/javascript">

   //<![CDATA[

    if(typeof sIFR == "function"){

      sIFR.replaceElement(named({sSelector:"h1", sFlashSrc:"vandenkeere.swf", sColor:"#000000", sWmode:"transparent"}));

     };

   //]]>

</script>

Veamos lo que hace la función replaceElement, en el primer parametro (sSelector) indicamos que elemento va a remplazar, en este caso el <h1> tengamos en cuenta que va a reemplazar todos los <h1> que encuentre en la pagina, si queremos seleccionar un objeto especifico podemos utilizar estas variantes...

• sSelector:"h5#titulo" - Solo modificara el h5 con id igual a "titulo".
• sSelector:"h5.titulo" - Solo modificara los h5 con la clase "titulo".
• sSelector:"h2" - Solo modificara los h2.

El segundo parametro ("sFlashSrc") indica el nombre del SWF donde esta nuestra fuente embebida, el segundo parametro indica el color de la fuente y el ultimo si el fondo es transparente.

Si deseamos aplicar varios estilo podemos hacerlo haciendo llamadas múltiples a la función replaceElement...

sIFR.replaceElement(named({sSelector:"h1", sFlashSrc:"vandenkeere.swf", sColor:"#000000", sWmode:"transparent"})); };

sIFR.replaceElement(named({sSelector:"h2#titulo", sFlashSrc:"tradegothic.swf", sColor:"#666666", sWmode:"transparent"})); };

Observaciones generales

Este sistema es compatible con Mac, PC y Linux en los navegadores de ultima generación (IE+5, Safari, Firefox, Opera +7). El peso del archivo SWF la mayoría de veces es menor a 10k lo cual no indica gran carga para nuestra pagina y en cuanto a la accesibilidad esta totalmente garantizada ya que nuestro código HTML no se modifica para nada, teniendo en cuenta esto ultimo tampoco perdemos palabras claves en los buscadores ya que el código esta totalmente visible.