Desde hace tiempo existen varias soluciones que mediante Flash, php o Javascript para incrustar las fuentes en el HTML permitiendo a cualquier usuario ver esa tipografía independientemente de que no la tenga.
Entre las muchas opciones he probado cufon, una muy buena opción que utiliza javascript, es muy fiable y responde a los estilos CSS.
Manual rápido de Cufon
- Creamos un .js de la fuente, esto lo hacemos desde este formulario.
Desde este formulario buscamos la fuente (con extensión ttf) , configuramos algunos parámetros y marcamos los términos legales.
Nos aparecerá un archivo para descargar.
¡OJO! no se pueden cargar fuentes desde la carpeta "FONTS" de windows, copialas y pégalas en el escritorio. - Descargamos el código fuente de Cufon.
¡OJO! probablemente Firefox te abra el archivo en vez de descargarlo, bájalo con Explorer por ejemplo o haz un "guardar como". - Creamos un html donde enlacemos desde el <head> ambos .js y añadimos la regla que hace la sustitución:
<script src="cufon-yui.js" type="text/javascript"></script>
<script src="fuente_personalizada.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1');
</script>
Con "Cufon.replace('h1')" le decimos que añada la fuente en todas las etiquetas h1.
Otras configuraciones
Varias fuentes simultaneasSi queremos utilizar varias tipografías hay que crear un .js de cada una (paso 1), enlazarlo desde el <head> e indicar las etiquetas que utilizan las fuentes:
<script src="script/cufon-yui.js" type="text/javascript"></script>
<script src="magic-font.js" type="text/javascript"></script>
<script src="BladeII.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1', { fontFamily: 'magic-font'});
Cufon.replace('p', { fontFamily: 'BladeII'});
</script>
De este modo indicamos que los h1 serán sustituidos con la fuente "magic-font" y los p con "BladeII".
Degradados
También tenemos opción de crear degradados muy conseguidos:
Cufon.replace('h1', {color: '-linear-gradient(white, black)'});
Podemos utilizar cualquier color, incluso conseguir degradados de varios colores:
Cufon.replace('h1', {color: '-linear-gradient(red, green, yellow)'});
Efecto hover
Si queremos añadir un enlace y que funcione el hover:
Cufon.replace('h1', {hover: true});
Con css podemos asignar las propiedades a cada estado.
Para terminar un ejemplo que incluye todos estos parámetros simultáneamente:
Cufon.replace('h1', { fontFamily: 'BladeII', color: '-linear-gradient(white, black)', hover: true});
Cufon.replace('p', { fontFamily: 'Magic-font', color: '-linear-gradient(red, yellow, black)' });
Recalcar que si utilizamos un degradado al mismo tiempo que un hover, el hover no funcionará correctamente.
Por último para evitar problemas en explorer podemos añadir este código justo antes de </body>:
<script type="text/javascript"> Cufon.now(); </script>
Podéis ver toda la información en http://wiki.github.com/sorccu/cufon/about (en ingles).
Entradas
Hola, he intentado sin exito colocar textos con cufón con la propiedad "Italica" o "Cursiva", he dado la propiedad en js y le he dado la propiedad en la hoja de estilos. Tambien he subido la fuente con su condición cursiva pero tampoco me la toma. De ninguna forma me ha funcionado.
ResponderEliminarSabes como puedo solucionar este inconveniente?
Interesante articulo, esta muy buena la información.
ResponderEliminar