Uno de los problemas con los que han lidiado los diseñadores web desde siempre, es el limite de fuentes para implementar en el diseño de un sitio.
Es decir , que no podíamos utilizar fuentes extravagantes o fuera de lo común ya que si el usuario no las tenia instaladas en el equipo estas no se mostraban por lo que casi siempre terminábamos usando fuentes estándar por ejemplo: Arial , Verdana , Helvetica entre otras debido a que estas se encuentran instaladas por defecto en la mayoría de sistemas operativos.
Para resolver este problema han surgido muchas herramientas y técnicas como por ejemplo : embeber la fuente en un archivos swf como lo hacia siFR , o utilizar SVG mediante Javascript con la herramienta Cufon , o generar una imagen a partir de el texto con PHP y la libreria GD , o por ejemplo una de las técnicas mas usadas era reemplazar el texto por una imagen png o gif transparente, esta ultima nada recomendable para el posicionamiento en buscadores.
Hoy en día con las nuevas versiones de navegadores y el soporte a @font-face tenemos la libertad de utilizar fuentes que no se encuentren instaladas en el sistema del usuario de una manera fácil sin utilizar scripts raros o técnicas engorrosas y todo con el poder de CSS3 :
Lo único que tenemos que hacer , subir la fuente con el formato correcto al servidor y enlazarla desde la propiedad @font-face dentro de nuestro archivo CSS.
@font-face {
font-family: "Aller";
src: url(<a href="http://www.tudomino.com/fonts/aller.ttf" title="http://www.tudomino.com/fonts/aller.ttf">http://www.tudomino.com/fonts/aller.ttf</a>) format("truetype");
}
h1 { font-family: "Aller", sans-serif }
Pero esto tiene un problema y sigue siendo la compatibilidad , ya que mientras en un navegador puedes usar formatos de fuentes TrueTypeFont (TTF) , en otro tienes que usar OpenType (OTF) e incluso en otros como Safari en IPhone usar el formato SVG , asi que debes conocer que formato corresponde a cada navegador para que la fuente se muestre correctamente .
Aquí una pequeña lista de los formatos soportados :
- TrueType Fonts oara Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4.0.249.4+
- EOT fonts para Internet Explorer 4+
- WOFF fonts para Firefox 3.6+, Internet Explorer 9+, Chrome 5+
- SVG fonts para iPad and iPhone
Tip : En este enlace puedes ver una tabla mas amplia respecto a los formatos web : webfonts.info
Una solución seria enlazar todos los formatos de fuentes dentro de el archivo CSS por ejemplo :
@font-face {
font-family: 'Aller';
src: url('http://www.tudomino.com/fonts/aller.eot');
src: url('http://www.tudomino.com/fonts/aller.eot?#iefix') format('embedded-opentype'),
url('http://www.tudomino.com/fonts/aller.woff') format('woff'),
url('http://www.tudomino.com/fonts/aller.ttf') format('truetype'),
url('http://www.tudomino.com/fonts/aller') format('svg');
}
h1 { font-family: "Aller", sans-serif }
El problema surge cuando una fuente solo se encuentra en un solo formato , por ejemplo .eot o .ttf por lo que tenemos que cambiar la fuente al formato que deseemos utilizar.
Existen herramientas que ayudan a convertir fuentes por ejemplo de .ttf a .eot como esta WEFT proporcionada por Microsoft o el sitio web FontSquirrel que nos brinda una herramienta en linea para poder cambiar el formato de fuentes y donde ademas podras descargar kits de fuentes completos listos para utilizar en nuestros diseños.
También cabe aclarar que las licencias de algunas fuentes restringen su uso , si no has pagado por ellas , pero no te preocupes existe una gran cantidad de fuentes gratuitas unas mejor que las de paga.
El tema de @font-face es un poco extenso y en el siguiente articulo veremos diferentes técnicas que nos ayudaran a utilizar esta maravillosa propiedad de CSS.