Cómo utilizar cualquier fuente/tipografía en nuestra página web

A la hora de crear páginas webs a veces nos encontramos limitados por las tipografías o fuentes tipográficas que podemos utilizar en ellas, dado que no todos los navegadores y sistemas operativos incluyen el mismo número de fuentes, y las tipografías de los sistemas operativos no serán las mismas. Por ello si queremos aplicar cualquier fuente a nuestra página podemos hacer lo siguiente:

Lo primero es descargar la fuente en formato True Type, cuya extensión es ttf. Una vez tengamos la fuente en ttf, debemos convertirla también a formato Open Type Embebido, es decir eot, o formato Web Open Font (woff) para tener compatibilidad con Internet explorer. Para llevar a cabo dicha conversión existen multitud de programas y páginas gratuitas, tan solo debemos buscar por las palabras “ttf to eot” o “ttf to woff” en cualquier buscador para encontrar una.

Una vez tengamos la fuente en ambos formatos debemos utilizar en CSS la directiva @font-face para declarar nuestra nueva fuente, por ejemplo si hemos descargado la fuente “futurastd-light-webfont.ttf”, debemos colocar el siguiente código en nuestra hoja de estilos:
	@font-face {
		font-family: "Futura";
		font-style: normal;
		font-weight: normal;
		src: local("?"), url("/fonts/futurastd-light-webfont.woff") format("woff"), url("/fonts/futurastd-light-webfont.ttf") format("truetype");
	}

Siendo font-family el nombre que utilizaremos en el resto de la hoja de estilos para referenciar a nuestra nueva fuente.

A continuación un ejemplo de como utilizar nuestra nueva fuente que hemos declarado arriba:
	p {
		font-family: Futura;
	}

De esta forma todas las etiquetas “p” tendrán como estilo nuestra nueva fuente declarada como Futura.

Existen dos alternativas más para utilizar cualquier fuente, una se conoce como sIFR y consiste en realizar el remplazo de las fuentes mediante flash. Y la otra alternativa es Cufón, la cuál utiliza javascript y la etiqueta canvas para remplazar cualquier texto por la fuente nueva, y es la que más se utiliza a día de hoy por no requerir plugins, tener una gran compatiblidad con todos los navegadores, ser fácil de usar y tener una gran velocidad incluso con grandes textos.

Para utilizar cufón tenemos que convertir nuestra fuente True Type a SVG, para a su vez convertirla en VML (lenguaje de marcas vectorizado), y obtener finalmente un json con cierta funcionalidad. Esto lo podemos hacer desde la Web de Cufón de manera sencilla y rápida.

Las ventajas de Cufón son claras, permite cargar cualquier fuente con tan solo incluir un script en nuestra página web. Y para el renderizado se utiliza VML para Internet Explorer y la etiqueta canvas de HTML 5 para el resto de navegadores.

A continuación un ejemplo de código para utilizar Cufón:
Lo primero es declarar el script de cufon qué podemos descargar de su web.
	

Después colocamos el json de la fuente generada, el cuál se genera utilizando el generador de la web de Cufón.
	

Y ya simplemente remplazamos las etiquetas o textos deseados, colocando en una etiqueta script el código, en el ejemplo se hace un replace para la etiqueta h1 y para el id sub1.
	Cufon.replace('h1');
	Cufon.replace('#sub1');

	

Texto a remplazar con la nueva fuente


Cufón además soporta selectores de jQuery o cualquier otro framework de javascript, pero para poder utilizarlos deberemos incluir jQuery o el utilizado en nuestra web.

Finalmente comentar que la directiva @font-family de CSS requiere navegadores con soporte de CSS3, y tiene la ventaja de permitirnos copiar el texto al portapapeles, cosa que con Cufón no podemos hacer. Ahora bien si quieres utilizar cualquier fuente en navegadores antiguos debes utilizar Cufón, pues estos no soportan la directiva font-family.

Comentarios

Comentario de hernan - 27 de Junio de 2011 - 10:47
sos un genio!
Comentario de hernan - 27 de Junio de 2011 - 11:01
como cambio el tamaño de la fuente?
Comentario de haney - 18 de Agosto de 2011 - 01:15
no me funciona en IEXPLORE hay algun fixed o q propiedad es la esencial para q lo reconosca
Comentario de haney - 18 de Agosto de 2011 - 04:19
No me funciona con la fuente baskerv,myriam... estas seguro q funciona?
Comentario de martin - 09 de Febrero de 2012 - 18:10
Que significa "?" qe es src: local("?")
Comentario de Maximiliano - 15 de Noviembre de 2012 - 17:37
buenisimo, muchas gracias
Comentario de juan carlos - 20 de Marzo de 2013 - 19:38
me haz salvado la vida, no encontraba la solución para cambiar el tipo de letra en una plantilla que me habia descargado, MIL GRACIAS
Comentario de Jonathan - 07 de Abril de 2013 - 22:31
Muchas Gracias!!!!!!!!!!
Comentario de Cris - 25 de Julio de 2013 - 03:14
Gracias por la información!!!
Comentario de Sara - 12 de Septiembre de 2013 - 06:08
Muy buena la información, pero tengo un problema, estoy trabajando orientado a objeto por lo que todo esta dentro de carpetas, tengo una para estilos, vistas, js, clases,... lo que no logro es que teniendo las carpetas ordenadas asi: estilo/estilo_menu/iconic.css y la carpeta fonts/iconic_stroke.eot pueda utilizar el @font-face si mi vista esta en la carpeta: vistas/Inicio/index.html si la carpeta fonts la meto dentro de la carpeta vistas/Inicio si funciona pero si la saco no logro colocar la url correcta dentro del iconic.css para que unique el .eot
Comentario de paulina - 10 de Marzo de 2014 - 01:46
Muy útil tu informacion! Gracias!
Comentario de Damian - 17 de Junio de 2014 - 01:01
Gracias el código CSS funcinó perfectamente para un navegador de Android.
Comentario de fanaes - 20 de Agosto de 2014 - 01:35
muchas gracias me sirvo mucho!
Comentario de NeoPantera - 17 de Junio de 2016 - 03:40
Muchas gracias me funciono perfecto
Comentario de nicolas - 05 de Octubre de 2016 - 23:56
Mil gracias!!!
Ha habido un error en el envío
Comentario enviado. Será revisado por la moderación antes de ser publicado.

Deja tu comentario

Tu nombre:
Tu email:
Tu comentario:
Nuestra página web utiliza cookies propias y de terceros, para realizar el análisis de la navegación de los usuarios y así poder mejorar nuestros servicios. Si continúas navegando, consideramos que aceptas su uso. Puedes cambiar la configuración u obtener más información aquí