[SOLUCIONADO] Error con @font-face en IE

liper_not · #1 (**permalink**) 13/04/2013, 11:14

Hola amigos, tengo un problema con una web.... se ve bien en Chrome y Firefox pero no con Internet Explorer 8, 9, 10.... no se cargan las tipografias como debe ser... no se por que razon:

Este es el link de la web: http://j.mp/175apLw (no se por que no puedo insertar link embebido)

Me podrian ayudar con dar a la solucion?

Gracias.

cuasatar · #2 (**permalink**) 13/04/2013, 11:51

En lugar de mostrarnos tu pagina, muestranos como generas el font-face. No soy experto en el tema pero si se que explorer necesita de unas chapuzas extra para que se visualice la pagina.

Igual si tienes tu fuente original usa el servicio de font squirrel para generar la fuente de manera sencilla. A mi me funciona estas fuentes en opera,firefox,explorer y chrome (molestaba con safari para windows pero no se si esto sigue siendo asi)

http://www.fontsquirrel.com/

liper_not · #3 (**permalink**) 13/04/2013, 11:54

Cita:

Iniciado por cuasatar

En lugar de mostrarnos tu pagina, muestranos como generas el font-face. No soy experto en el tema pero si se que explorer necesita de unas chapuzas extra para que se visualice la pagina.

Igual si tienes tu fuente original usa el servicio de font squirrel para generar la fuente de manera sencilla. A mi me funciona estas fuentes en opera,firefox,explorer y chrome (molestaba con safari para windows pero no se si esto sigue siendo asi)

[url]http://www.fontsquirrel.com/[/url]

Estan generadas de esa pagina, tiene los archivos .eot que usa IE y tiene tambien el #iefix pero por alguna razon no carga, y no se por que... hay varios css en diferentes sitios de la web, pero todos "jalan" del css generado de fontsquirrell :( por eso no se por que razon no se ven las fuentes en IE

cuasatar · #4 (**permalink**) 13/04/2013, 11:58

Vuelvo en insisto, por favor muestranos tu css porque aquí donde me ves no soy adivino. El error puede llegar a ser algo trivial o algo muy complicado segun se le mire.

Yo creo cual puede ser la solución pero necesito verificar tu font face. Antes de verlo me es imposible adivinar.

p.s. Ver el video de Stefanie Cayo en la pagina ha hecho que valga la pena ayudarte jajaja.

liper_not · #5 (**permalink**) 13/04/2013, 12:29

Cita:

Iniciado por cuasatar

Vuelvo en insisto, por favor muestranos tu css porque aquí donde me ves no soy adivino. El error puede llegar a ser algo trivial o algo muy complicado segun se le mire.

Yo creo cual puede ser la solución pero necesito verificar tu font face. Antes de verlo me es imposible adivinar.

p.s. Ver el video de Stefanie Cayo en la pagina ha hecho que valga la pena ayudarte jajaja.

Que bueno que haya valido la pena xD

El css de donde se jalan las fuentes es: http://j.mp/126omJL
Hay otro que esta en la raiz del theme: http://j.mp/15bfvtj
y tambien http://j.mp/Zoo1Oi

hay otros pero, ya es redundar en lo mismo.

cuasatar · #6 (**permalink**) 13/04/2013, 12:49

Bueno, es un archivo mega grande y posiblemente el error se deba a alguna omisión que hayas hecho. Yo te recomiendo hacer algo mas sencillo para detectar tu error. Ve probando de a una en una, es decir solo carga un font face, carga un solo font-family (de momento olvidate de las demas. Realiza las prueba en local para no dañar lo que tienes en la red)

Código CSS:

Ver original@font-face {
 font-family: HelveticaNeue;
 src: url("stylesheet/helveticaneue.eot") /* EOT file for IE */
}
 
body {
    line-height: 160%; line-height:1.50; 
    -webkit-text-size-adjust: 100%;
    font-family:'HelveticaNeueLTStd-LtCn', HelveticaNeue, "Helvetica Neue", Arial,   Helvetica, sans-serif; 
}

Esto que encontre aca en font family creo que podria ser el origen del problema. Si lo sabes bien las fuentes no seguras se colocan con doble comilla para que el navegador sepa que las debe buscar de font-face. Yo en este pequeño codigo veo que tienes comillas simples, sin comillas y doble comilla. Quizas para IE el sea dificil entender a cual debe hacerle caso.

Como son tantas el error podria estar en cualquier lado. Mi sugerencia es cargar solo una fuente y probarla. Una vez que te funcione le vas añadiendo las demas y asi sucesivamente.

Yo seguiria las pautas que te dan en los ejemplos cuando uno los descarga. Yo veo que lo usas un poco diferente.
Espero que con esta guia te quede facil solucionar tu problema. Si me pasas el video te podria seguir ayudando jajajaja.

liper_not · #7 (**permalink**) 13/04/2013, 13:12

Cita:

Iniciado por cuasatar

Bueno, es un archivo mega grande y posiblemente el error se deba a alguna omisión que hayas hecho. Yo te recomiendo hacer algo mas sencillo para detectar tu error. Ve probando de a una en una, es decir solo carga un font face, carga un solo font-family (de momento olvidate de las demas. Realiza las prueba en local para no dañar lo que tienes en la red)

Código CSS:

Ver original@font-face {
 font-family: HelveticaNeue;
 src: url("stylesheet/helveticaneue.eot") /* EOT file for IE */
}
 
body {
    line-height: 160%; line-height:1.50; 
    -webkit-text-size-adjust: 100%;
    font-family:'HelveticaNeueLTStd-LtCn', HelveticaNeue, "Helvetica Neue", Arial,   Helvetica, sans-serif; 
}

Esto que encontre aca en font family creo que podria ser el origen del problema. Si lo sabes bien las fuentes no seguras se colocan con doble comilla para que el navegador sepa que las debe buscar de font-face. Yo en este pequeño codigo veo que tienes comillas simples, sin comillas y doble comilla. Quizas para IE el sea dificil entender a cual debe hacerle caso.

Como son tantas el error podria estar en cualquier lado. Mi sugerencia es cargar solo una fuente y probarla. Una vez que te funcione le vas añadiendo las demas y asi sucesivamente.

Yo seguiria las pautas que te dan en los ejemplos cuando uno los descarga. Yo veo que lo usas un poco diferente.
Espero que con esta guia te quede facil solucionar tu problema. Si me pasas el video te podria seguir ayudando jajajaja.

En la fuente del menu principal esta solamente entre ' ' sin embargo tampco el IE la lee y muestra la Times New Roman xD

cuasatar · #8 (**permalink**) 13/04/2013, 14:05

Realiza una pagina web aparte (simplifica aun mas tu problema). Yo aca te pongo el ejemplo de lo que siempre me funciona, no me lo estoy inventando, incluso lo tengo en mi blog. Reemplazalo por tu fuente (yo puse una de ejemplo que tengo aca). De igual forma verifica que todas las fuentes que necesites las tengas en el directorio que definiste. (Por lo que vi creo que las tienes en la misma carpeta del css)

Si esto ya no te funciona literalmente tiro la toalla. Los ejemplos cuando uno descarga los font faces son tan descriptivos que las probabilidades de equivocarse son casi nulos.

Código CSS:

Ver original@font-face {
    font-family: 'Champagne';
    src: url('champagne__limousines-webfont.eot');
    src: url('champagne__limousines-webfont.eot?#iefix') format('embedded-opentype'),
         url('champagne__limousines-webfont.woff') format('woff'),
         url('champagne__limousines-webfont.ttf') format('truetype'),
         url('champagne__limousines-webfont.svg#ChampagneLimousinesRegular') format('svg');
    font-weight: normal;
    font-style: normal;
 
}
 
body {
    background-color: #C2D4D4;
    color: #000;
    font-family: "Champagne",Helvetica, Verdana;
    font-size: 1em;
    font-weight: normal;    
}

Código HTML:

Ver original<html>
<head>
<!--aqui pones tu mini hoja de estilos-->
</head>
<body>
Por que diantres no me sirve IE! Lo odio!
</body>
</html>

Suerte con eso, ojala y lo resuelvas.

pzin · #9 (**permalink**) 13/04/2013, 14:07

Si te muestra Times New Roman es que estás haciendo algo realmente mal. Antes tendría que mostrarte Arial, Helvetica o cualquier fuente sin serifa, y Times no lo es.

No puedo mirarlo ahora porque no estoy al ordenador.

De todas formas revisa que te está cargando el archivo .css y/o que te está aplicando los estilos con el inspeccionador de elementos, porque que te salga Times es raro raro y además indica que el fallo está en que no se están aplicando los estilos.

liper_not · #10 (**permalink**) 14/04/2013, 12:27

Cita:

Iniciado por cuasatar

Realiza una pagina web aparte (simplifica aun mas tu problema). Yo aca te pongo el ejemplo de lo que siempre me funciona, no me lo estoy inventando, incluso lo tengo en mi blog. Reemplazalo por tu fuente (yo puse una de ejemplo que tengo aca). De igual forma verifica que todas las fuentes que necesites las tengas en el directorio que definiste. (Por lo que vi creo que las tienes en la misma carpeta del css)

Si esto ya no te funciona literalmente tiro la toalla. Los ejemplos cuando uno descarga los font faces son tan descriptivos que las probabilidades de equivocarse son casi nulos.

Código CSS:

Ver original@font-face {
    font-family: 'Champagne';
    src: url('champagne__limousines-webfont.eot');
    src: url('champagne__limousines-webfont.eot?#iefix') format('embedded-opentype'),
         url('champagne__limousines-webfont.woff') format('woff'),
         url('champagne__limousines-webfont.ttf') format('truetype'),
         url('champagne__limousines-webfont.svg#ChampagneLimousinesRegular') format('svg');
    font-weight: normal;
    font-style: normal;
 
}
 
body {
    background-color: #C2D4D4;
    color: #000;
    font-family: "Champagne",Helvetica, Verdana;
    font-size: 1em;
    font-weight: normal;    
}

Código HTML:

Ver original<html>
<head>
<!--aqui pones tu mini hoja de estilos-->
</head>
<body>
Por que diantres no me sirve IE! Lo odio!
</body>
</html>

Suerte con eso, ojala y lo resuelvas.

No me funciono tampoco, ya probe de las formas que me dijiste. Y nada, no reconoce, y muestra la Times New Roman. Son varios css, si en uno borro todas las fuentes, se meustra Arial solamente, pero si borro de dos css (style.css) y (style-custom.css) se muestra Times New Roman.

Cita:

Iniciado por pzin

Si te muestra Times New Roman es que estás haciendo algo realmente mal. Antes tendría que mostrarte Arial, Helvetica o cualquier fuente sin serifa, y Times no lo es.

No puedo mirarlo ahora porque no estoy al ordenador.

De todas formas revisa que te está cargando el archivo .css y/o que te está aplicando los estilos con el inspeccionador de elementos, porque que te salga Times es raro raro y además indica que el fallo está en que no se están aplicando los estilos.

No se por que en IE10-9 se ve el menu con times new roman y en IE8 se ve con Arial, pero el resto de contenido si se ve en Arial, solo en el menu se ve Times New Roman pero en IE10-9.

ahora???

liper_not · #11 (**permalink**) 14/04/2013, 12:30

No hay una cosa script o algo que fuerce a que se muestre igual que en Chrome? en IE?? siempre, porque son tantos archivos que no va ser facil encontrar una solucion....!! miren com ose ve en Chrome/Firefox y miren en cualquier version de IE a partir de la 8 en adelante, se ve diferente... IE del mal siempre jodiendo..!

liper_not · #12 (**permalink**) 18/04/2013, 21:20

He probado sus soluciones amigos pero no se arregla, que horror!! :(

cuasatar · #13 (**permalink**) 19/04/2013, 05:24

Bueno, mas o menos leyendo tu problema yo creo que aca se produce el problema:

Cita:

porque son tantos archivos que no va ser facil encontrar una solucion....!!

Yo creo que el problema es que al tener tantos css uno esta pisando al otro y el navegador al no poder decidir a cual le hace caso le toca sacar de lo que puede. Como yo trabajo siempre le doy en el body una fuente principal y si ya necesito fuentes especificas en una sección de la pagina las redefino. En mi experiencia personal las fuentes en IE siempre tardan mas en cargar pero al final si cargan. La cosa que podria estar pasando (no lo aseguro, solo es una suposición) es que esa fuente que usas no soporte IE de plano. La mejor manera de saberlo es mirar el archivo de prueba que descargaste de la "ardillita"

(font squirrel) y mirar si ella por si sola si se genera bien en IE. Mas colaboración me es imposible brindar porque yo te recomende que empezaras desde lo mas sencillo hasta lo mas dificil (carga solo una hoja de estilos, si la cosa funciona carga la otra y asi sucesivamente). Si no resuelves el problema desde un ejemplo sencillo hasta uno mas complicado creo que te sera imposible resolverlo. Espero que lo saques adelante.

liper_not · #14 (**permalink**) 19/04/2013, 14:57

Cita:

Iniciado por cuasatar

Bueno, mas o menos leyendo tu problema yo creo que aca se produce el problema:

Yo creo que el problema es que al tener tantos css uno esta pisando al otro y el navegador al no poder decidir a cual le hace caso le toca sacar de lo que puede. Como yo trabajo siempre le doy en el body una fuente principal y si ya necesito fuentes especificas en una sección de la pagina las redefino. En mi experiencia personal las fuentes en IE siempre tardan mas en cargar pero al final si cargan. La cosa que podria estar pasando (no lo aseguro, solo es una suposición) es que esa fuente que usas no soporte IE de plano. La mejor manera de saberlo es mirar el archivo de prueba que descargaste de la "ardillita"

(font squirrel) y mirar si ella por si sola si se genera bien en IE. Mas colaboración me es imposible brindar porque yo te recomende que empezaras desde lo mas sencillo hasta lo mas dificil (carga solo una hoja de estilos, si la cosa funciona carga la otra y asi sucesivamente). Si no resuelves el problema desde un ejemplo sencillo hasta uno mas complicado creo que te sera imposible resolverlo. Espero que lo saques adelante.

Ya pobre y detecte algo:

Cuando sustituyo en los diferentes css la fuente 'gggregular' si funciona y se visualiza, pero si pongo otras fuentes, no las reconoce, me hace sospechar q no se han convertido al formato .eot o algo raro pasa... xq todo si se ve en firefox y chrome, el problema solo es en versionse de IE...

las fuentes estan en j.mp/126omJL

claro que hay otras dispersadas en otro lugar, pero parece q no se han convertido bien como lo detecto??

otra sospecha... no sea por el uso de puras minusculas en 'gggregular'??? en cambio las otras usan guiones, mayusculas-minusculas, etc.

liper_not · #15 (**permalink**) 19/04/2013, 15:26

Me olvidaba, tambien otra que funciona de ese archivo es:
'helvetica_narrow_ceregular'sumada a 'gggregular' son las unicas que funcionan.

tambien te digo que hice lo que me recomendaste:

cree un html solo, cargando solamente el css y la carpeta de fuentes, igual, esas 2 son las UNICAS fuentes que me funcionan para IE.

Parece que no se han convertido bien las .eot simplemente (creo)... como lo puedo solucionar...

liper_not · #16 (**permalink**) 19/04/2013, 15:35

Como veran, no soy el unico que tiene el problema con las .eot en IE:

http://code.google.com/p/ttf2eot/issues/detail?id=10

supuestamente aqui hay una solucion...

https://github.com/fontello/fontello...omment-7791793

voy a leerlo

liper_not · #17 (**permalink**) 19/04/2013, 16:09

Ya encontre el problema, es porque los convertidores no han podido convertir las ttf que son protegidas, me acabo de dar cuenta subiendo una fuente sola .ttf a fontsquirrel...

"Adobe has requested that their font "nombre_de_la_fuente" be blacklisted by the Generator. You will not be able to convert this font."

Es muy complicado buscar otras fuentes parecidas a las que hay para que se usen en IE... por lo que pregunto... ¿hay alguna forma de forzar la conversion de estas ttf sin problemas a .eot??

pzin · #18 (**permalink**) 19/04/2013, 16:14

Cita:

Iniciado por liper_not

Es muy complicado buscar otras fuentes parecidas a las que hay para que se usen en IE... por lo que pregunto... ¿hay alguna forma de forzar la conversion de estas ttf sin problemas a .eot??

Prueba con este convertidor.

Usa siempre fuentes que hayas pagado o sean gratuitas. En Google Web Fonts hay bastantes fuentes y, si estás dispuesto a pagar un poquito, tienes TypeKit —yo lo uso porque tiene fuentes excelentes, aunque puedes usar una versión gratuita que tiene limitaciones— que incluso puede ser que incluya esa fuente que quieres usar, ya que TypeKit es de Adobe.

liper_not · #19 (**permalink**) 19/04/2013, 19:17

Cita:

Iniciado por pzin

Prueba con este convertidor.

Usa siempre fuentes que hayas pagado o sean gratuitas. En Google Web Fonts hay bastantes fuentes y, si estás dispuesto a pagar un poquito, tienes TypeKit —yo lo uso porque tiene fuentes excelentes, aunque puedes usar una versión gratuita que tiene limitaciones— que incluso puede ser que incluya esa fuente que quieres usar, ya que TypeKit es de Adobe.

Gracias, ya use ese convertidor alternativamente al Fontsquirrel pero nada, sigue sin cargarse la fuente..... creo que voy a tener que buscar unas parecidas, lo malo que se me va a descuadrar el diseño..

voy a ver esa otra Typekit, pero cuales son las limitaciones que incluyen las fuentes gratuitas??

Aparte, no hay algo que desbloquee o algo asi las fuentes? o por lo menos les cambie el nombre interno para que no las detecte? xD Es un poco mal que haga esto, pero no sabia que las fuentes que estaba usando estaban bloqueadas y por eso no se pueden cargar en IE, en el resto si, ya que carga las ttf.

liper_not · #20 (**permalink**) 19/04/2013, 20:43

ya probe esa web llamada typekit pero no encuentro lsa fuentes que queria...

liper_not · #21 (**permalink**) 20/04/2013, 20:40

Bueno, al final lo solucione.

El problema era que habian fuentes que no cargaban en IE porque no habian sido convertidas o eran bloqueadas por fontsquirrel... las originales (.ttf) obviamente si cargaban en navegadores como chrome o mozilla, pero las .eot o .woff convertidas no eran accesibles...

lo solucione con una aplicacion especial para fuentes

gracias de todos modos por su ayuda

si alguno de ustedes que lee el tema mucho despues, y tienen el mismo problema me escriben un mp..

Saludos.

ArturoGallegos · #22 (**permalink**) 03/05/2013, 09:58

font-squirrel no bloquea las fuentes al convertirlas, si las tiene en su lista negra simplemente te las rechaza y no las procesa....

si eran inaccesibles lo mas obvio/lógico es que tuvieran mal asignados los permisos en tu hosting lo que se corrige con entrar desde tu ftp y darle permisos de lectura.

liper_not · #23 (**permalink**) 03/05/2013, 16:58

Cita:

Iniciado por ArturoGallegos

font-squirrel no bloquea las fuentes al convertirlas, si las tiene en su lista negra simplemente te las rechaza y no las procesa....

si eran inaccesibles lo mas obvio/lógico es que tuvieran mal asignados los permisos en tu hosting lo que se corrige con entrar desde tu ftp y darle permisos de lectura.

Ya esta solucionado.

No es lo que mencionas que "obvio/logico" sobre los permisos. No tiene nada que ver con eso.

Las fuentes estaban bloqueadas porque fontsquirrel detectaba que el fabricante de estas era una marca protegida y no permitia subir dichas fuentes.

Entonces genero las fuentes, pero estas no existian, solo eran archivos, entonces IE no reconocia las .eot o las .woff, en cambio Chrome y Firefox si, ya que leia las .ttf y estas eran las originales (que no se habian convertido).

Ese era el problema y lo puse en mi ultimo mensaje. Y puse problema solucionado tambien.

Gracias de igual forma.

verlovero · #24 (**permalink**) 11/09/2013, 16:32

Hola quisiera saber con que aplicacion y de que manera solucionaste el problema? Ya que tengo el mismo inconveniente. gracias

Cita:

Iniciado por liper_not

Bueno, al final lo solucione.

El problema era que habian fuentes que no cargaban en IE porque no habian sido convertidas o eran bloqueadas por fontsquirrel... las originales (.ttf) obviamente si cargaban en navegadores como chrome o mozilla, pero las .eot o .woff convertidas no eran accesibles...

lo solucione con una aplicacion especial para fuentes

gracias de todos modos por su ayuda

si alguno de ustedes que lee el tema mucho despues, y tienen el mismo problema me escriben un mp..

Saludos.

TheM4ster · #25 (**permalink**) 03/01/2014, 12:35

Excelente, tenia el mismo problema con IE, me sirvió la información. Saludos

liper_not · #26 (**permalink**) 05/01/2014, 12:53

Cita:

Iniciado por verlovero

Hola quisiera saber con que aplicacion y de que manera solucionaste el problema? Ya que tengo el mismo inconveniente. gracias

Ya te envié un privado con la solución.

liper_not · #27 (**permalink**) 05/01/2014, 12:54

Cita:

Iniciado por TheM4ster

Excelente, tenia el mismo problema con IE, me sirvió la información. Saludos

Si no te funciona con otras fuentes me envías privado para brindarte la solución. Saludos.

pzin · #28 (**permalink**) 05/01/2014, 16:16

liper_not siempre es mejor poner la soluciones aquí en el foro, así si le pasa a otra persona pues tiene aquí la solución.

liper_not · #29 (**permalink**) 08/01/2014, 12:04

Cita:

Iniciado por pzin

liper_not siempre es mejor poner la soluciones aquí en el foro, así si le pasa a otra persona pues tiene aquí la solución.

Ya puse en anteriores mensajes la razón por la cual no coloco la solución aquí al público. No es legal, simplemente por eso. Por eso los que agotan las soluciones y ya hicieron todas sus diseños con unas fuentes y es muy trabajoso cambiarlas todas, como última solución, me escriben MP. Pero repito no es legal ese método.