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.