Font face es la gran solución en CSS para los diseñadores.
Mi compañero Víctor ha comentado varias soluciones para usar tipografías no estándar en nuestra web, y quiero explicar una buena solución con recurso incluido que me ha sacado hoy de un apuro.
Con Font Face, propiedad en CSS podemos usar cualquier tipografía en nuestra web. Un buen detalle para destacar de los demás diseños de páginas web.
Es importante decir que esta propiedad es compatible para los nuevos navegadores, Firefox, Chrome, Safari con tipografías en formato TTF y OTF.
En el caso de Internet Explorer 6 y 7 no soporta estos formatos pero si en formato EOT. Pero no os preocupeis, tenemos un recurso online para solucionarlo y poder conversionar la fuente al formato necesario.
En Font Squirrel tenemos un conversor online que nos facilitara el trabajo, tenemos que subir la fuente que queremos utilizar y en unos segundos nos descargaremos un zip con el css, html de ejemplo y la tipografía en el formato EOT para que se pueda visualizar en Internet Explorer.
Yo voy a probar Font Squirrel con una tipografía no estándar, en esta caso Myriad Pro, después de subir la fuente y seguir los pasos correspondientes, descargo el zip, con todo lo necesario.
Ya tenemos nuestra tipografía en formato eot para que se pueda ver correctamente en Internet Explorer, también tenemos el css, solo tenemos que adaptarlo en nuestra hoja de estilos y subir las fuentes a nuestro servidor, ejemplo de css
@font-face { font-family: 'Myriad Pro'; src: url('MyriadPro.eot'); src: local('Myriad Pro Regular'), local('MyriadPro-Regular'), url('MyriadPro.otf') format('opentype'); }
Ahora la fuente por default es Myriad Pro, primero llamamos la fuente eot para Internet Explorer y después la otf para el resto de navegadores aunque también puede ser ttf.
Por último voy a especificar en css que por defecto se muestre la fuente Myriad Pro en todos los documentos.
body { font: 14px "Myriad Pro", Verdana, arial, sans-serif; }
Ahora los usuarios de la web pueden ver la misma fuente que nosotros, sin estar instalada en su pc.
Detalles del Autor
Emprendedor y fanático del desarrollo web en general.
