font-face css

[orchating]

Hola amigos vereís tengo una pequeña duda pero que me esta complicando bastante la vida...

Tengo esta web gestiondeobras.cat , en ella los estilos parten desde el firefox, el problema viene con la fuente, que necesito 4 tipos de fuentes, ok las instalo codigo:

Código:

@font-face { font-family: "Swis721"; src:url(fonts/Swiss721.woff) format("woff");}
@font-face { font-family: "Swis722"; src:url(fonts/Swiss722.woff) format("woff");}
@font-face { font-family: "Swis723"; src:url(fonts/Swiss723.woff) format("woff");}
@font-face { font-family: "Swis724"; src:url(fonts/Swiss724.woff) format("woff");}

hasta aqui ningún problema, el tema que si la veo en explorer 7 u 8, no se ve la fuente que esta puesta y se descoloca evidentemente, pero en el explorer 9 se ve le lujo, es mas yo creo que es el navegador que mejor se ve, y si os fijais en los enlaces del pie de la página, en cada navegador se ve de una manera distinta en cada uno y es la primera vez que me pasa en mi vida... nose que hacer.

La solución yo creo que es poner las fuentes en el css en varios formatos e probado en ."otf" y ".ttf", pero nada no se que hacer.......... es posible poner todos los formatos a la vez o no?

Muchas gracias y espero una pequeña luz al final del tunel jejeje.

PD: he subido la web a http://browsershots.org, para ver los resultados, podeis verlos aqui: http://browsershots.org/http://gestiondeobras.cat/

[Tedel]

Eso es simplemente porque IE 9 acepta WOFF, pero las versiones anteriores no. Para las anteriores necesitas incrustar la fuente en formato EOT.

[Tedel]

Otra cosa: necesitas comprobar también en Opera, Safari y Chrome.

[emprear]

Te recomiendo que te bajes cualquier kit prefabricado desde
http://www.fontsquirrel.com/

descomprimilo y ejecutalo en tu PC con los distintos browsers, revisa como funciona
Después si queres creas tu propio kit en
http://www.fontsquirrel.com/fontface/generator

Saludos

[Silkon]

Compartir es bueno

Por eso te dejo aquí una forma sencilla de ponerlo para los 5 navegadores mas usados hoy en día.

Código PHP:

  @font-face
    {
        font-family: "BankGothic Md BT";
        
         /* Para Internet Explorer */
        src: url('fuente/bgothm.eot');
 
         /*  Para el resto de navegadores */
        src: local('BankGothic Md BT'),
         url('fuente/bgothm.ttf') format('truetype');
    } 
   

Va pegado directamente de mi web, cambia la fuente y listo.

Lo comprobé y me funciona en todos, saludos.