¿Que son las @Font-face?

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.

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 :

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.

Leave a Reply

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *