@font-face en IE9

Luisus · #1 (**permalink**) 18/03/2011, 12:32

Saludos compañeros.

Creo que todos estamos más que emocionados con la reciente salida de IE9 y todos los problemas que esto nos resuelve ya que Microsoft por fin hizo algo bien.

En fin, mi problema radica en el atributo CSS @font-face, simplemente no logro que funcione en IE9 cuando antes funcionaba en IE8 :S

He probado con fuentes otf, ttf y eot pero con ninguna funciona. Lo raro es que cuando visito sitios que usan @font-face, estos sí se muestran bien.

Mi código es el siguiente:

Código HTML:

<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
@font-face { 
      font-family:Avant;
	  src: url(fonts/AvantGardeBk.eot);
   }
</style>
</head>

<body>

<p style="font-family: Avant; font-size: 18pt">¡Este párrafo debería tener la fuente Avant en IE9, pero no la tiene!</p>

</body>

</html>

He probado poner entre comillas "font-family", también a lo que está dentro de url pero tampoco funciona.

Necesito ojos frescos... ¿Qué estoy haciendo mal?

Muchas gracias por su ayuda.

P.D. El código que estoy intentando que funcione es casi idéntico al ejemplo que ponen en la página de Microsoft : http://msdn.microsoft.com/library/ms530757.aspx

kseso? · #2 (**permalink**) 18/03/2011, 13:44

Mire a ver si este post le es de ayuda:
http://www.forosdelweb.com/f53/font-...eccion-882810/

Luisus · #3 (**permalink**) 18/03/2011, 14:48

Muchísimas gracias por responder, el tema que me mostraste fué de gran ayuda.

He solucionado el problema, fué un tanto enredoso pero en pocas palabras el problema era de la fuente.

IE9 (y previos) cargaban bien otras fuentes (en formato eot)...¿Pero por qué esa no? Nunca lo sabremos.

Lo que hice fué buscar una fuente gratuita casi idéntica en internet, convertirla en eot y conservar la fuente ideal (la que no se mostraba) en ttf.

el atributo CSS que utilicé fué el siguiente:

Cita:

@font-face {
font-family: "Avant Garde Bk";
font-style: normal;
font-weight: normal;
src: url('fonts/AvantGTE.eot?'),url('fonts/AvantGardeBk.ttf');
}

Definiendo primero el eot asegura que se mostrará en IE, el ttf es para los que manejan CSS3 y el weight es para que en los navegadores WebKit uno pueda modificar la fuente a bold.

Tanto rollo para poner una fuente... sueño con el día en que los navegadores se unifiquen... que manejen HTML5 y CSS3 de forma nativa y que uno no tenga que escribir -moz, -ms o andar usando hacks para que las cosas funcionen como deberían de hacerlo.

Muchas gracias por la ayuda y espero este post sirva a alguien en un futuro.

Saludos.

vince_1981 · #4 (**permalink**) 24/03/2011, 12:58

Hola a todos, estoy creando una web con css y probando las posibilidades de @font-face, pero me encuentro con un problema que no se si es debido a que hago algo mal o que no funciona sin más...

Es una web con 3 frames, y quiero que al seleccionar un link del frame superior, me cambien los 2 otros dos frames con el siguiente código:

<a class="linkmenu" href="contenidocentral.html" title="cargarcontenido" target="framecentral" onclick="parent.frames['frameinferior'].location.href='MenuInferior.html';return true">cargarcontenido</a>

En IE8 al cargar la página me cargan bien las fuentes embedidas, pero al pinchar en el link, las fuentes cambian al segundo tipo de fuente en todos los frames. Lo curioso es que si actualizo la página con F5 se cargan bien las fuentes.

He quitado del anterior codigo la carga del segundo frame, y funciona bien, no se si del código javascript hay algo que hago mal o asi no va a funcionar en IE8...

Alguien lo puede probar o echarme un cable????Graciassss!!

kseso? · #5 (**permalink**) 26/03/2011, 08:22

Sin más información sólo cabe elucubrar.

Facilite un enlace para ver in situ el problema.

Tedel · #6 (**permalink**) 26/03/2011, 10:25

Sigue el ejemplo que utilizo en mi web:

@font-face /* A font by Jos Buivenga (exljbris) -> www.exljbris.nl */
{
font-family: 'Fertigo';
src: url('fertigo.eot'); /* IE9 en formato compatibilidad */
src: url('fertigo.eot?iefix') format('eot'), /* IE 5-8 */
url('fertigo.woff') format('woff'), /* IE9, firefox 3.5+, Opera 11.10 */
url('fertigo.ttf') format('truetype') /* Chrome, Safari, Opera 11.01- */
}

vince_1981 · #7 (**permalink**) 06/04/2011, 10:25

Disculpad por no contestar antes, al final he hecho la web con div para separar en tres secciones en vez de frames, tras saber que los frames no se llevan muy bien con el posicionamiento web, y sin frames me funcionan bien los font face. Bueno en realidad no me funciona en firefox porque no tengo la fuente en formato woff, hay alguna manera de convertir la fuente ttf o eof a woff?? Un saludo y muchas gracias.