Desde el jueves pasado he andado con una espina en el trabajo, una que me ha complicado la existencia y ha sido causa de stress el jueves, viernes y martes (el lunes fue feriado). Resulta que en un sitio que rediseñamos, había que utilizar una tipografía no estandar: Helvética. Entonces mi trabajo consistía en hacer que esa letra se viera en todos los navegadores.
Ya me había enfrentado a algo así, pero no había logrado que la cuestión funcionara tanto en internet explorer como en firefox. Asi que, a parte de tener que adaptar todo el sitio original a css, tuve que investigar cómo diablos lograr este efecto.
Pues bien, tras mucho buscar, encontré este sitio, que tiene la papa. En resumen, la propiedad @font-face debe ser redundante, para que cada navegador lo lea:
@font-face {
font-family: " el nombre de tu fuente ";
src: url( /location/of/font/FontFileName.eot ); /* IE */
src: local(" nombre real de tu fuente "), url( /location/of/font/FontFileName.ttf ) format("truetype"); /* non-IE */
}
/* Así se llama a la fuente recien enlazada */
.estilo_parrafo { font-family:" el nombre de tu fuente ", verdana, helvetica, sans-serif;
}
Ahora bien, para poder usar esto, hay que convertir la fuente (archivo ttf) al formato EOT. Para ello basta con usar esta simpática herramienta en linea. Y voilá: problema solucionado.
.