Todos sabemos que la propiedad de CSS font-face funciona en los navegadores como Firefox y Opera entre otros. Pero nunca conseguíamos adaptarlo correctamente para Internet Explorer. Explicamos brevemente como conseguir que funcione sin problemas.
Antes de nada, debemos convertir la fuente al formato embebido eot. Este formato es el que usaremos para Internet Explorer, para el resto de navegadores se deja el formato estandar ttf.
Ya obtenidos ambos formatos de la fuente que queremos aplicar en nuestra Web, pasamos a la hoja de estilos. Tenemos que introducir las siguientes líneas de CSS, donde se define el nombre de la fuente y la ruta donde se encuentra dicha fuente.
Navegadores Comunes (Firefox, Opera, Safari, Chrome)
@font-face{
font-family:'20th Century Font';
src: url('../font/20thfont.ttf') format('truetype');
}
Internet Explorer
@font-face{
font-family:'20th Century Font';
src: url('../font/20thfont.eot');
}
Una vez que se haya escrito estas líneas en la hoja de estilos de nuestra Web, ya podemos usar dicha fuente en cualquier elemento HTML, por ejemplo:
#menu ul li a{color:#000;font-family:"20th Century Font";}
Para convertir las fuentes a los diferentes formatos, podéis usar la aplicación Microsoft WEFT. Bueno espero que os sirva de ayuda. He de advertir que no todas las fuentes suavizan de forma nítida en todos los navegadores, pero es el único método y el más preciso para conseguir visualizar las fuentes.
Microsoft para apoyar su formato propietario nos están jorobando a todos, como siempre. ¿Que les costará implementar las fuentes truetype o OpenType en sus navegadores?
Precisamente no utilizaba la propiedad font-face porque pensaba que no era soportada por Explorer. Esto me ayudará mucho.
Muy buen aporte.
Hola
Es increible que a estas alturas todavía una no pueda elegir una tipografía para diseñar la web que necesite. Intentaré probar esto, ya que, de lo que llevo leído hasta ahora es lo que más me convence.
Gracias.
Se me olvido preguntar… Una vez que hacemos todo esto ¿se elige la tipografía desde el mismo menú donde elegimos verdana o georgia, etc…?
Hola Mónica. Como pone en el ejemplo:
#menu ul li a{color:#000;font-family:”20th Century Font”;}
Se define igual que hemos hecho siempre, lo que en este caso la fuente hace referencia al nombre que le has dado al poner el font-face. Aquí la hemos llamado 20th Century Font.
Thanks for helping me to see things in a dffiernet light.
tcGgEl kieupbovsymq
Gracias Álvaro.
una pregunta, lo podemos poner entre etiquetas como
Ejemplo
o sólo desde el CSS?
y funciona en Safari?.
perdon no salio el codigo.
—
funciona con etiquetas como la font o solo desde el CSS?
esto
‘ EJEMPLO ‘
(sin espacios)
funcionaria?
perdon por repetir, pero no logro poner el código:
funcionaria si lo pongo en la etiqueta font dentro del html o sólo vale en el css?
font face=”20th Century Font”
Solo en CSS, poner fuentes en las etiquetas HTML como que ya no estamos para usar esto, pudiendo utilizar las propiedades de CSS.