Foros del Web » Creando para Internet » HTML »

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

Estas en el tema de Porqué Firefox no me lee el @font-face?? en el foro de HTML en Foros del Web. 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! ...
  #1 (permalink)  
Antiguo 15/09/2010, 04:58
 
Fecha de Ingreso: agosto-2010
Mensajes: 13
Antigüedad: 6 años, 11 meses
Puntos: 0
Pregunta Porqué Firefox no me lee el @font-face??

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!
  #2 (permalink)  
Antiguo 15/09/2010, 07:07
Colaborador
 
Fecha de Ingreso: septiembre-2010
Ubicación: Alpedrete,Madrid
Mensajes: 621
Antigüedad: 6 años, 10 meses
Puntos: 145
Respuesta: Porqué Firefox no me lee el @font-face??

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;
}
  #3 (permalink)  
Antiguo 15/09/2010, 07:44
 
Fecha de Ingreso: agosto-2010
Mensajes: 19
Antigüedad: 6 años, 10 meses
Puntos: 2
Respuesta: Porqué Firefox no me lee el @font-face??

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)
  #4 (permalink)  
Antiguo 15/09/2010, 15:51
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años
Puntos: 361
Respuesta: Porqué Firefox no me lee el @font-face??

Hola:

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

Saludos.

  #5 (permalink)  
Antiguo 17/09/2010, 13:05
 
Fecha de Ingreso: agosto-2010
Mensajes: 13
Antigüedad: 6 años, 11 meses
Puntos: 0
Respuesta: Porqué Firefox no me lee el @font-face??

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...¿?
  #6 (permalink)  
Antiguo 17/09/2010, 13:30
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 1 mes
Puntos: 538
Respuesta: Porqué Firefox no me lee el @font-face??

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.
  #7 (permalink)  
Antiguo 17/09/2010, 15:20
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años
Puntos: 1567
Respuesta: Porqué Firefox no me lee el @font-face??

mithmetallian:

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


Demo:
http:[email protected]/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
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #8 (permalink)  
Antiguo 01/12/2010, 12:38
Avatar de deidos  
Fecha de Ingreso: diciembre-2010
Ubicación: Córdoba
Mensajes: 1
Antigüedad: 6 años, 7 meses
Puntos: 0
De acuerdo Respuesta: Porqué Firefox no me lee el @font-face??

Cita:
Iniciado por emprear Ver Mensaje
mithmetallian:

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


Demo:
[url]http:[email protected]/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]

Última edición por deidos; 01/12/2010 a las 12:48
  #9 (permalink)  
Antiguo 25/03/2011, 13:05
 
Fecha de Ingreso: marzo-2011
Mensajes: 4
Antigüedad: 6 años, 3 meses
Puntos: 0
Respuesta: Porqué Firefox no me lee el @font-face??

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:
Ver original
  1. @font-face {
  2.  font-family: Vasca;
  3.  src: url("images/Vasca_Berria_TT.eot"); /* EOT file para IE */
  4.  src: url("VASCA.ttf") format("truetype"); /* TTF file para CSS3 browsers */
  5. }
  #10 (permalink)  
Antiguo 26/03/2011, 10:29
Avatar de Tedel  
Fecha de Ingreso: enero-2011
Ubicación: Lima
Mensajes: 2.725
Antigüedad: 6 años, 6 meses
Puntos: 441
Respuesta: Porqué Firefox no me lee el @font-face??

No incluyas esto:

Cita:
Iniciado por mithmetallian Ver Mensaje
[CODE]
font-weight: normal;
font-style: normal;
Y el problema debería resolverse.
__________________
Soy el autor de Heptagrama y tengo un servicio "todo incluido" de marketing web.
  #11 (permalink)  
Antiguo 28/03/2011, 09:54
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 1 mes
Puntos: 538
Respuesta: Porqué Firefox no me lee el @font-face??

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.
  #12 (permalink)  
Antiguo 30/03/2011, 09:30
 
Fecha de Ingreso: marzo-2011
Mensajes: 4
Antigüedad: 6 años, 3 meses
Puntos: 0
Respuesta: Porqué Firefox no me lee el @font-face??

Cita:
Iniciado por mike24 Ver Mensaje
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:
Ver original
  1. @font-face {
  2.  font-family: Vasca;
  3.  src: url("images/Vasca_Berria_TT.eot"); /* EOT file para IE */
  4.  src: url("VASCA.ttf") format("truetype"); /* TTF file para CSS3 browsers */
  5. }

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!!

Última edición por mike24; 30/03/2011 a las 09:36
  #13 (permalink)  
Antiguo 30/03/2011, 11:10
Avatar de Tedel  
Fecha de Ingreso: enero-2011
Ubicación: Lima
Mensajes: 2.725
Antigüedad: 6 años, 6 meses
Puntos: 441
Respuesta: Porqué Firefox no me lee el @font-face??

Cambia las comillas dobles (") por comilla simple (') a ver si lo arregla.
__________________
Soy el autor de Heptagrama y tengo un servicio "todo incluido" de marketing web.
  #14 (permalink)  
Antiguo 30/03/2011, 13:13
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 1 mes
Puntos: 538
Respuesta: Porqué Firefox no me lee el @font-face??

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:
Ver original
  1. @font-face {
  2.     font-family: 'VascaBerriaTTRegular';
  3.     src: url('vasca_berria_tt-webfont.eot');
  4.     src: url('vasca_berria_tt-webfont.eot?iefix') format('eot'),
  5.          url('vasca_berria_tt-webfont.woff') format('woff'),
  6.          url('vasca_berria_tt-webfont.ttf') format('truetype'),
  7.          url('vasca_berria_tt-webfont.svg#webfontcv1Tru2S') format('svg');
  8.     font-weight: normal;
  9.     font-style: normal;
  10.  
  11. }
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.
  #15 (permalink)  
Antiguo 30/03/2011, 16:55
 
Fecha de Ingreso: marzo-2011
Mensajes: 4
Antigüedad: 6 años, 3 meses
Puntos: 0
Respuesta: Porqué Firefox no me lee el @font-face??

@kseso? Muchísimas gracias, pues con lo que me indicas se ha podido solucionar.
  #16 (permalink)  
Antiguo 20/04/2011, 12:09
 
Fecha de Ingreso: octubre-2009
Mensajes: 45
Antigüedad: 7 años, 9 meses
Puntos: 3
Respuesta: Porqué Firefox no me lee el @font-face??

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

Última edición por CarlosMC; 20/04/2011 a las 12:19
  #17 (permalink)  
Antiguo 09/06/2011, 16:39
 
Fecha de Ingreso: junio-2011
Mensajes: 1
Antigüedad: 6 años, 1 mes
Puntos: 0
Respuesta: Porqué Firefox no me lee el @font-face??

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.

Última edición por danigarra; 09/06/2011 a las 17:03 Razón: Nueva comprobación.
  #18 (permalink)  
Antiguo 09/06/2011, 17:09
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años
Puntos: 1567
Respuesta: Porqué Firefox no me lee el @font-face??

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
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.

Última edición por emprear; 05/03/2013 a las 17:08
  #19 (permalink)  
Antiguo 12/06/2015, 16:27
 
Fecha de Ingreso: agosto-2014
Ubicación: Cd. de México
Mensajes: 22
Antigüedad: 2 años, 11 meses
Puntos: 0
Respuesta: Porqué Firefox no me lee el @font-face??

Cita:
Iniciado por deidos Ver Mensaje
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

Etiquetas: @font-face, css, css3, navegadores
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 18:37.