Fuentes Cufon con IE8 – Problema y solución

Utilizar fuentes de texto originales en títulares de secciones o de bloques es una práctica muy de moda en los nuevos diseños web. De este modo, huímos un poco de las tradicionales fuentes en web como la Arial, Helvetica o Georgia para textos destacados y en consecuencia, dando un toque mas moderno y actual a nuestro site.

Para insertar diferentes tipos de fuentes en nuestra web existen muchas opciones. Una muy extendida es utilizar fuentes CUFON. Muchas son gratuitas y otras de pago, pero gracias a ellas puedes conseguir textos de impacto sin penalizar la visibilidad de tu web para los tan importantes buscadores.

El hecho de utilizar CUFON u otros elementos de fuentes de texto mejoradas para tu blog o web tiene un efecto visual importante …

pero al acceder a la web con un navegador Internet Explorer 8 nos dará algun quebradero de cabeza ya que se duplica el texto.

Alternativa

Para evitar que se vea un efecto similar a la superposicion y duplicado de texto lo mejor es que insertes la siguiente línea en el fichero footer.php (de tu WordPress) justo despues de la llamada a la función wp_footer() como se indica

</div><!– end #footer –>

<?php wp_footer(); ?>
<![if !(IE 8)]>
<script type=”text/javascript”>Cufon.replace(‘h1′, { fontSize: ’50px’ , fontFamily: ‘Pacifico’, } );</script>
<![endif]>
</body>
</html>

Si ponemos esta linea en el <head> de la página, puede generarnos algún conflicto con otros módulos por lo que aseguramos que sea lo que sea que se ejecute, al final acabará cargando la excepción donde se indica:

<![if !(IE 8)]>  (Si usuario que visita la web no lo hace con un Internet Explorer 8, entonces ejecutará el script que cargará nuestra fuente cufon… En el caso de nuestra lacasadelaswebs.com es la “Pacífico”)

Estas líneas de código, solo van a evitar que se duplique el texto. En IE8 se mostrará la web con las fuentes preestablecidas. Para fortuna de todos los usuarios de Internet Explorer, en la versión 9 del navegador, ya esta solucionada esta funcionalidad por lo que podrán ver la web tal y como la diseñamos.

 

Etiquetado con: , , , ,
Publicado en: Trucos