Cuando construyes una página web hay momentos en los que queremos utilizar cierta fuente para un título o un texto destacado, que no esta disponible en todos los navegadores. Antiguamente se utilizaban imágenes con el texto que queríamos mostrar, pero era algo que representaba bastante trabajo, al menos para el que construia la página.
Después surgieron algunas soluciones básicas con CSS con el uso de @font-face pero no siempre funcionaba, por ello ahora te muestro una solución que ya se viene trabajando desde hace algun tiempo con algunos sitios Web.
Consiste con la instalación de la libreria Cufón que esta basada en jQuery y nos permite además de reemplazar fuentes, añadir efectos los textos
Ventajas de usar Cufón:
- No necesita plugins instalados en el navegador.
- Es compatible con la mayoría de navegadores del mercado.
- Es rápido. Puede reemplazar grandes téxtos rápidamente.
- Es fácil de instalar (lo vemos ahora mismo).
¿Cómo instalar Cufón?
Descarga cufón y añádelo a tu proyecto:
<script src=»cufon-yui.js» type=»text/javascript»></script>
Convierte a cufón la fuente que quieres utilizar, si tu proyecto es en español no te olvides de los acentos, “eñes”, etc…Para hacerlo solamente ingresa a esta página. Sube el archivo .font o .ttf, acepta los termino y descarga el archivo que genera.
Añade el archivo .js que te genera la página de cufón y llama al objeto en tu código, de la siguiente forma:
<script src=»cufon-yui.js» type=»text/javascript»></script>
<script src=»Myriad.font.js» type=»text/javascript»></script>
<script type=»text/javascript»>
Cufon.replace(‘h1’);
</script>
En caso de que tengas varías fuentes, solamente añade el JS de la(s) otra(s) fuentes e implementa éste código:
Cufon.replace(‘h1’, { fontFamily: ‘Vegur’ });
Cufon.replace(‘h2’, { fontFamily: ‘Myriad Pro’ });
El método anterior se logra usando Javascript, pero si ya tienes el JS de Cufon y tu fuente en JS, puedes hacer uso de CSS de la siguiente forma:
@font-face {
font-family: ‘WalkwaySemiBoldRegular’;
src: url(‘css/walkway_semibold-webfont.eot’);
src: url(‘css/walkway_semibold-webfont.eot?#iefix’) format(‘embedded-opentype’),
url(‘css/walkway_semibold-webfont.woff’) format(‘woff’),
url(‘css/walkway_semibold-webfont.ttf’) format(‘truetype’),
url(‘css/walkway_semibold-webfont.svg#WalkwaySemiBoldRegular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}