Porqué Firefox no me lee el @font-face??

[mithmetallian]

Hola!

creia haber encontrado la panacea para implementar las fuentes descargables en mis web gracias a fontsquirrell y su aplicación para convertir fuentes, pero oh! resulta que todos los navegadores me leen correctamente el @font-face de mi CSS menos Firefox...¿¿QUÉ PASA AQUI?? :P

el codigo en el CSS es el siguiente:

Código:

@font-face {
	font-family: 'BankGothicLtBTLight';
	src: url('fuentes/bgothl.eot');
	src: local('BankGothic Lt BT'), local('BankGothicBT-Light'), url('fuentes/bgothl.woff') format('woff'), url('fuentes/bgothl.ttf') format('truetype'), url('fuentes/bgothl.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

.menuhoriz {
width: 780px;
height: 40px;
position: absolute; top: 140px;
z-index:2;
text-align: center;
font-family: 'BankGothicLtBTLight';
font-size:22px;
color:#ffffff;
}

Como digo, hasta Explorer me lo lee bien y aplica la fuente descargable, pero Firefox se empeña en ponerme una bonita Times New Roman por defecto.. ¿¿Wasap??

Help me plizz

Gracias!

[nainona]

hola, yo en una de las webs que estoy haciendo he usado lo del fontface y me tira bien tanto en ie como firefox, te pego para que veas como lo tengo, la verdad lo unico que se me ocurre es que falte alguna coma por ahi, tal vez¿? sino ni idea, yo que tu probaba a quitar cosas y ya ir poniendolas de 1 en 1 a ver cual falla.

@font-face {
font-family: Myriad Web Pro;
src: local("Myriad Web Pro"), url("fonts/Myriad Web Pro.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}

[shava]

no todos los exploradores renderean de la misma forma las fuentes de sistema (la misma fuente no se vé igual en todos los exploradores), mucho menos ocurre esto las descargables.

Por poner un ejemplo en las google fonts algunas de ellas se reproducen perfectamente, mientras la misma en IE no se representan bien.

Si vas a coger una fuente, primero prueba una que sea 100% compatible en todos los exploradores (por ejemplo la Myriad Pro la utilicé en un proyecto también y no me dió problemas)

[jomaruro]

Hola:

Aquí teneis un interesante artículo que os puede ayudar: Usando fuentes bonitas.

Saludos.

[mithmetallian]

Hola y gracias.

Jomaruro, al final del articulo que me linkas referencian la solucion de fontsquirrell que he tratado de implementar. leyendo comentarios parece que Firefox da problemas en eso, pero me parece muy extraño!!!

tiene que haber una manera...Creo que el fallo puede estar al relacionar las fuentes con el font-family: de los estilos, pero claro, los otros navegadores si lo entienden..¿xq xq xq???¿cual sería la forma arquetipica para un @font-face entendible por Firefox?

Misterio misterioso...¿?

[kseso?]

En la página que te indicó Jomaruro, ¿la viste con ff y pudiste ver las fuentes usadas?
¿Qué versión de firefox utilizas? Importante.
¿Tu problema lo tienes en local o con la página en algún servidor (aunque sea localhost)?
He observado un día de estos (reciente) que alguna fuente con la página en local (file:///C:/...) vista en ff no se representa la @font-face, pero servida desde el servidor sin problema. No pude investigar mucho el tema y por lo tanto no tengo respuesta.

[emprear]

mithmetallian:

Tu código, si funciona en Firefox (3.6.10)


Demo:
http://foros.emprear.com/@font-face/ff.html

(tambien funciona viéndola desde el equipo local (file://...)

Obviamente usé otra fuente y en formato ttf, te recomiendo que en src definas local y sólo el tipo de fuente que vas a usar. Puede tambien que tu fuente esté corrupta, aunque al parecer la .eot está bien si te funciona en IE

Hay otra posibilidad, estas usando la fuente desde tu propio servidor?
Firefox tiene una restricción si estás llamando la fuenta desde otro dominio. Para corregirlo podés incluir en tu .htaccess


<FilesMatch "\.(ttf|otf|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

Saludos

[deidos]

Iniciado por emprear

mithmetallian:

Tu código, si funciona en Firefox (3.6.10)


Demo:
[url]http://foros.emprear.com/@font-face/ff.html[/url]

(tambien funciona viéndola desde el equipo local (file://...)

Obviamente usé otra fuente y en formato ttf, te recomiendo que en src definas local y sólo el tipo de fuente que vas a usar. Puede tambien que tu fuente esté corrupta, aunque al parecer la .eot está bien si te funciona en IE

Hay otra posibilidad, estas usando la fuente desde tu propio servidor?
Firefox tiene una restricción si estás llamando la fuenta desde otro dominio. Para corregirlo podés incluir en tu .htaccess


<FilesMatch "\.(ttf|otf|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

Saludos

Efectivamente, para que me funcione en firefox tengo que meter cada tipo de fuente por separado, según sea eot, ttf o otf usando hojas de estilo diferentes para cada navegador.

Gracias!
----------------------------------------
[URL]http://www.deidos.com[/URL]

[mike24]

Hola, soy nuevo en el foro, bueno en realidad llevo años usando el foro, pero sin haberme registrado jeje.
Me pasa algo curioso con @font-face: funciona en IE 8 perfectamente y no lo hace en Firefox de windows (en firefox de mac si que va bien!! esto es lo mas llamativo)
Todos los navegadores estan actualizados, estoy usando .ttf para navegadores con css3 y .eot para IE.
¿Qué estoy haciendo mal?

Código CSS:

@font-face {
 font-family: Vasca;
 src: url("images/Vasca_Berria_TT.eot"); /* EOT file para IE */
 src: url("VASCA.ttf") format("truetype"); /* TTF file para CSS3 browsers */
}
 

[Tedel]

No incluyas esto:

Iniciado por mithmetallian

[CODE]
font-weight: normal;
font-style: normal;

Y el problema debería resolverse.

[kseso?]

Siento disentir, pero a priori en nada influyen las variaciones (weight/style.../size/variant...) de una tipografía (font) en la declaración "family" haciéndolas por separado.

Otra cosa distinta es si utilizase la forma acortada posteriormente /font:..../. Pero de eso, no hay constancia en la consulta.

[mike24]

Iniciado por mike24

Hola, soy nuevo en el foro, bueno en realidad llevo años usando el foro, pero sin haberme registrado jeje.
Me pasa algo curioso con @font-face: funciona en IE 8 perfectamente y no lo hace en Firefox de windows (en firefox de mac si que va bien!! esto es lo mas llamativo)
Todos los navegadores estan actualizados, estoy usando .ttf para navegadores con css3 y .eot para IE.
¿Qué estoy haciendo mal?

Código CSS:

@font-face {
 font-family: Vasca;
 src: url("images/Vasca_Berria_TT.eot"); /* EOT file para IE */
 src: url("VASCA.ttf") format("truetype"); /* TTF file para CSS3 browsers */
}
 

Desisto, he probado todo lo habido y por haber... ruta con comillas, sin comillas, con propiedad 'local', sin ella, con propiedad font-family, sin...

Como cosa curiosa, y tras tanto leer he encontardo esto: http://dl.dropbox.com/u/39519/webfontsdemo/index.html (pruébenlo en los distintos navegadores)
He probado hasta con el smiley!! y nada, en firefox y IE de windows no va...
Al final va a ser la fuente, que esta dañada??
Si no les importa prueben con ella a ver.
http://www.beterri.com/wp-content/themes/beterri/images/Vasca_Berria_TT.eot
http://www.beterri.com/wp-content/themes/beterri/images/Vasca_Berria_TT.ttf
Gracias!!

[Tedel]

Cambia las comillas dobles (") por comilla simple (') a ver si lo arregla.

[kseso?]

Ni la tipografía en sí ni el archivo que utiliza tienen nada que ver.
Haga lo siguiente:
Vaya al generador de fontsquirrel seleccione el modo expert, suba su archivo ttf y obtendrá los archivos de la tipografía (.ttf | .eot | .svg | .woff ) necesarios así como la regla @font-face:

Código CSS:

@font-face {
    font-family: 'VascaBerriaTTRegular';
    src: url('vasca_berria_tt-webfont.eot');
    src: url('vasca_berria_tt-webfont.eot?iefix') format('eot'),
         url('vasca_berria_tt-webfont.woff') format('woff'),
         url('vasca_berria_tt-webfont.ttf') format('truetype'),
         url('vasca_berria_tt-webfont.svg#webfontcv1Tru2S') format('svg');
    font-weight: normal;
    font-style: normal;
 
}
 

Sólo tendrá que subir los archivos a su servidor y modificar la ruta a ellos para que se vean.

Con la página de ejemplo que da ese generador yo al menos sí veo la tipografía en ff. En local y sin pasar por localhost.
Por eso mi afirmación primera.

[mike24]

@kseso? Muchísimas gracias, pues con lo que me indicas se ha podido solucionar.

[CarlosMC]

Hola, busco humildemente ayuda, al principio firefox me leia la fuente, y de buenas a primera a dejado de hacerlo. os pongo el código del css. Funciona en Chrome, Safari y Opera pero en Firefox no. He probado a descargarme las fuentes de font squirrel pero nada de nada

@font-face {
font-family: 'FuturaLight';
src: url('fonts/futuralc-webfont.eot');
src: url('fonts/futuralc-webfont.eot?#iefix') format('eot'),
url('fonts/futuralc-webfont.woff') format('woff'),
url('fonts/futuralc-webfont.ttf') format('truetype'),
url('fonts/futuralc-webfont.svgz#webfont0vpeQlxH') format('svg'),
url('fonts/futuralc-webfont.svg#webfont0vpeQlxH') format('svg');
font-weight: normal;
font-style: normal;

}


#nav a {
margin:0 4px 0 0;
float:left;
padding:13px 15px;
text-transform:uppercase;
color: #fff;
font-weight: bold;
font-family:FuturaLight,Futura,Arial;
font-size:18px;

}


Edito:
De repente me vuelve a coger la fuente :S. Mi firefox es la versión 4.0.1 y tiene desactivada la aceleración por hardware, a veces me la coge otras veces no, algo que no llego a comprender

[danigarra]

Hola a todos en primer lugar y gracias por cuantas dudas me habéis resuelto.

Ahora al tema: por lo que yo he sufrido el problema está en que firefox e internet explorer entienden las rutas relativas que leen en la hoja de estilo de forma distinta. Por tanto yo lo he resuelto duplicando las líneas "src".

Código:

@font-face {
    font-family: "JustMeAgainDownHereRegular";
    src: url('justmeagaindownhere-webfont.eot');
    src: url('justmeagaindownhere-webfont.eot?#iefix') format('embedded-opentype'),
         url('justmeagaindownhere-webfont.woff') format('woff'),
         url('justmeagaindownhere-webfont.ttf') format('truetype'),
         url('justmeagaindownhere-webfont.svg#JustMeAgainDownHereRegular') format('svg');
    src: url('../css/justmeagaindownhere-webfont.eot');
    src: url('../css/justmeagaindownhere-webfont.eot?#iefix') format('embedded-opentype'),
         url('../css/justmeagaindownhere-webfont.woff') format('woff'),
         url('../css/justmeagaindownhere-webfont.ttf') format('truetype'),
         url('../css/justmeagaindownhere-webfont.svg#JustMeAgainDownHereRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Edito: Me vuelve a fallar.

[emprear]

Firefox,IE,Chrome, Opera, etc, entienden las rutas siempre de la misma forma, para evitar errores usa rutas absolutas (no hace falta la url con el http...)

/archivo.txt
/directprio/archivo.txt
/directorio/subdirectorio/archivo.txt


Saludos

[sumde]

Iniciado por deidos

Efectivamente, para que me funcione en firefox tengo que meter cada tipo de fuente por separado, según sea eot, ttf o otf usando hojas de estilo diferentes para cada navegador.

Gracias!
----------------------------------------
[URL]http://www.deidos.com[/URL]

Hola! pese que ya tiene mucho tiempo esto espero tener suerte, ya que justo tengo ese error al usar font face guardando las fuentes en servidor y al ver mi archivo localmente no se ven en firefox ni chrome, solo safari, podrías darme una mano con el tema?

Mil gracias
Saludos