Tutorial para incluir en nuestra Web cualquier tipo de fuente: Tipos de archivos de fuentes (ttf, eot, otf, svg), propiedad CSS2 @font-face

Históricamente los diseñadores web nos hemos encontrado con el problema de poder incluir únicamente un puñado de aburridas fuentes “seguras” en nuestros diseños web. Afortunadamente desde hace un tiempo este problema fue resuelto mediante nuevas propiedades de CSS (como la @font-face) permitiéndonos embeber las fuentes en nuestro site y que se visualizaran correctamente, con indiferencia de si el usuario final tiene instalada o no la fuente en concreto en su ordenador.

Pero esta propiedad mágica (@font-face) de CSS seguro que os ha dado más de un dolor de cabeza al comprobar que no es tan “mágica” después de todo. Lo mas seguro es que vuestra Web se vea completamente diferente en cada nuevo navegador con la que la probáis…verdad? Y ya no hablemos de versiones del mismo navegador…todo un mundo!

font-face css3 tutorial incrustar fuentes web

Da igual que ya hayáis empezado a trabajar con esta propiedad o que no la conocierais hasta ahora. En este artículo te daremos todas las claves para aprender a utilizarla correctamente, empezando desde el “érase una vez un archivo de fuente”. Hoy vamos a conseguir que las fuentes de vuestra Web se vean perfectamente bajo cualquier navegador y configuración, explicando paso a paso los trucos para cada uno de ellos.

Seguir leyendo