css - ttf - font face sass
CSS @ font-face no funciona con Firefox, pero funciona con Chrome e IE (28)
EJECUTANDO LOCALMENTE EL SITIO ( file:/// )
Firefox viene con una política muy estricta de "origen de archivo uri" ( file:/// ) por defecto: para que se comporte como otros navegadores, vaya a about:config , filtre por fileuri y cambie la siguiente preferencia:
security.fileuri.strict_origin_policy
Establézcalo en falso y podrá cargar recursos de fuentes locales en diferentes niveles de ruta.
SITIO PUBLICADO
Según mi comentario a continuación, y está experimentando este problema después de implementar su sitio, puede intentar agregar un encabezado adicional para ver si su problema se configura a sí mismo como un problema de dominio cruzado: no debería, ya que está especificando rutas relativas, pero lo probaría de todos modos: en su archivo .htaccess, especifique que desea enviar un encabezado adicional para cada archivo .ttf / .otf / .eot que se solicita:
<FilesMatch "/.(ttf|otf|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
Francamente, no esperaría que hiciera ninguna diferencia, pero es tan simple que vale la pena intentarlo: de lo contrario, intenta usar la codificación base64 para tu tipografía de fuente, fea, pero puede funcionar también.
Un buen resumen está disponible here
El siguiente código funciona tanto en Google Chrome beta como en IE 7. Sin embargo, Firefox parece tener un problema con esto. Sospecho que es un problema de cómo se incluyen mis archivos CSS, porque sé que Firefox no es muy amigable con las importaciones entre dominios.
Pero todo esto es solo HTML estático y no hay dudas de dominios cruzados.
En mi landing-page.html hago una importación de CSS así:
<link rel="stylesheet" href="../css/main.css" type="text/css" media="screen, projection" />
Dentro de main.css tengo otras importaciones como esta:
@import url("reset.css");
@import url("style.css");
@import url("type.css");
y dentro de type.css tengo las siguientes declaraciones:
@font-face {
font-family: "DroidSerif Regular";
src: url("font/droidserif-regular-webfont.eot");
src: local("DroidSerif Regular"),
url("font/droidserif-regular-webfont.woff") format("woff"),
url("font/droidserif-regular-webfont.ttf") format("truetype"),
url("font/droidserif-regular-webfont.svg#webfontpB9xBi8Q") format("svg");
font-weight: normal; font-style: normal; }
@font-face {
font-family: "DroidSerif Bold";
src: url("font/droidserif-bold-webfont.eot");
src: local("DroidSerif Bold"),
url("font/droidserif-bold-webfont.woff") format("woff"),
url("font/droidserif-bold-webfont.ttf") format("truetype"),
url("font/droidserif-bold-webfont.svg#webfontpB9xBi8Q") format("svg");
font-weight: normal; font-style: normal; }
body { font-family: "DroidSerif Regular", serif; }
h1 { font-weight: bold; font-family: "DroidSerif Bold", serif; }
Tengo un directorio llamado "font" en la misma ubicación que type.css. Este directorio de fuentes contiene todos los archivos woff / ttf / svg, etc.
Estoy perplejo en este caso. Funciona en Chrome e IE pero no en Firefox . ¿Cómo es esto posible? ¿Qué me estoy perdiendo?
¿Estás probando esto en archivos locales o fuera de un servidor web? Los archivos en diferentes directorios se consideran dominios diferentes para las reglas de dominio cruzado, por lo que si está realizando pruebas locales, podría estar aplicando restricciones entre dominios.
De lo contrario, probablemente sea útil señalar una URL donde ocurre el problema.
Además, sugeriría que mire la consola de error de Firefox para ver si se informa algún error de sintaxis de CSS u otros errores.
Además, me gustaría señalar que probablemente quieras font-weight: bold en la segunda regla @ font-face.
¿Puedes consultar con Firebug si obtienes 404? Tuve problemas en el pase y descubrí que la extensión era la misma pero linux file.ttf es diferente de file.TTF ... y funcionaba con todos los navegadores excepto con firefox.
¡Ojalá ayude!
Además de agregar lo siguiente a su .htaccess: (gracias @Manuel)
<FilesMatch "/.(ttf|otf|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
Es posible que desee intentar agregar explícitamente los tipos de mime de la fuente web al archivo .htaccess ... así:
AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff
Al final, mi archivo .htaccess se ve así (para la sección que permite que los webfonts funcionen en todos los navegadores)
# BEGIN REQUIRED FOR WEBFONTS
AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff
<FilesMatch "/.(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
# END REQUIRED FOR WEBFONTS
Debido a que este es uno de los principales resultados de Google para este problema, me gustaría agregar lo que resolvió este problema para mí:
Tuve que eliminar el formato (opentype) del src de font-face, luego funcionó también en Firefox. Funcionó bien en Chrome y Safari antes de eso.
Dejaré esto aquí porque mi compañero de trabajo encontró una solución para un problema relacionado con el "tipo de letra que no funciona en Firefox, pero en todos lados".
El problema fue que Firefox cometió un error con la declaración de la familia de fuentes, esto terminó solucionándolo:
body{ font-family:"MyFont" !important; }
PD: también estaba usando html5boilerplate.
El uso de un .htaccess Control de acceso Permitir regla de origen no funcionó para mí cuando tuve este problema.
En cambio, en IIS en web.config, inserte el bloque system.webServer que se muestra a continuación.
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
</customHeaders>
</httpProtocol>
</system.webServer>
</configuration>
Esto funcionó como un encanto para mí. Si necesita restringir el acceso a un dominio particular, reemplace * con el dominio.
En mi caso, he enviado un problema al insertar el código de estilo de la fuente
<style type="text/css">
@font-face {
font-family: ''Amazone'';font-style: normal;
/*font-weight:100; -webkit-font-smoothing: antialiased; font-smooth:always;*/
src: local(''Amazone''), url(font/Amazone.woff) format(''woff'');}
</style>
Dirección en el encabezado de su página index.html o php, en la etiqueta de estilo. ¡Funciona para mi!
Estaba teniendo el mismo problema al obtener una fuente para mostrarla correctamente en Firefox. Esto es lo que encontré para trabajar para mí. Agregue una barra antes del directorio que contiene la fuente en el atributo url. Aquí está mi antes y después de las versiones:
B E F O R E:
@font-face
{ font-family: "GrilledCheese BTN";
src: url(fonts/grilcb__.ttf);
}
A F T E R:
@font-face
{ font-family: "GrilledCheese BTN";
src: url(/fonts/grilcb__.ttf);
}
¿nota la barra inicial antes de ''fuentes'' en la url? Esto le dice al navegador que comience en el directorio raíz y luego acceda al recurso. Al menos para mí - Problema resuelto.
Estaba teniendo el mismo problema. Comprueba dos veces tu código para H1, H2 o el estilo al que te dirijas con la regla @ font-face. Descubrí que me faltaba el coma después font-family: ''custom-font-family'' Arial, Helvetica etc Se mostraba muy bien en todos los navegadores, excepto en Firefox. Agregué el coma y funcionó.
Este es un problema con la configuración de las rutas de la fuente. Como no comenzó la ruta con un "/", Firefox intentará encontrar la fuente en función de la ruta en la que se encuentra la hoja de estilo. Básicamente, Firefox está buscando su fuente en el directorio "raíz / css / fuente" en lugar de el directorio "raíz / fuente". Puede solucionarlo fácilmente moviendo la carpeta de fuentes a la carpeta css, o agregando un / al comienzo de las rutas de las fuentes.
Probar esto:
@font-face {
font-family: "DroidSerif Regular";
src: url("/font/droidserif-regular-webfont.eot");
src: local("DroidSerif Regular"), url("/font/droidserif-regular-webfont.woff") format("woff"), url("/font/droidserif-regular-webfont.ttf") format("truetype"), url("/font/droidserif-regular-webfont.svg#webfontpB9xBi8Q") format("svg");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "DroidSerif Bold";
src: url("/font/droidserif-bold-webfont.eot");
src: local("DroidSerif Bold"), url("/font/droidserif-bold-webfont.woff") format("woff"), url("/font/droidserif-bold-webfont.ttf") format("truetype"), url("/font/droidserif-bold-webfont.svg#webfontpB9xBi8Q") format("svg");
font-weight: normal;
font-style: normal;
}
body {
font-family: "DroidSerif Regular" , serif;
}
h1 {
font-weight: bold;
font-family: "DroidSerif Bold";
}
Intenta frotar la declaración de fuente local en tus directivas @font-face .
Hay un error conocido en Firefox o en la API de Google Font que impide que las variantes de las fuentes se utilicen si la fuente se instala localmente y coincide con el nombre local definido:
code.google.com/p/googlefontdirectory/issues/detail?id=13
Para corregir la declaración local de manera efectiva, simplemente haga que su cadena fuente local no tenga sentido. La convención generalmente aceptada para esto es usar un carácter smiley Unicode ( "☺" ). ¿Por qué? Paul Irish tiene una gran explicación en su blog:
Menciono que algunas fuentes tienen problemas en firefox si su nombre de archivo contiene caracteres específicos. Recientemente me encontré con un problema con la fuente ''Modulus'' que tenía un nombre de archivo ''237D7B_0_0''. Eliminar los guiones bajos del nombre del archivo y actualizar el css para que coincida con el nuevo nombre de archivo resolvió este problema. Otras fuentes con caracteres similares no tienen este problema, que es muy curioso ... probablemente un error en Firefox. Recomiendo mantener nombres de archivo solo para caracteres alfanuméricos.
Mi problema era que Windows llamaba a la fuente ''font.TTF'' y Firefox esperaba ''font.ttf''. Vi que después de abrir mi proyecto en Linux, renombré la fuente como nombre propio y todo funciona.
No hay necesidad de perder el tiempo con la configuración simplemente elimine las comillas y los espacios de la familia de fuentes:
esta
body {font-family: "DroidSerif Regular", serif; }
se convierte en esto
body {font-family: DroidSerifRegular, serif; }
No sé cómo creó la sintaxis, ya que utilicé svg en la declaración de fuentes, pero Font Squirel tiene una herramienta realmente buena para crear una fuente de fuente de sintaxis a prueba de balas a partir de una sola fuente.
Para esta fuente en particular, debe utilizar la API de Google Font:
http://code.google.com/webfonts/family?family=Droid+Sans
Si aún desea utilizar el generador de kits de FontSquirrel, use la opción de hackeo de Smiley para eliminar los problemas de fuentes locales. Después de generar un kit, verifique que el demo.html generado funcione en Firefox. Apuesto a que sí. Ahora cárgalo a tu servidor; apuesto a que también funciona allí porque FontSquirrel es increíble.
Sin embargo, si rompiste el código del kit generado al integrarlo en tu proyecto, utiliza los métodos estándar de depuración: busca los 404 e ingresa línea por línea hasta que encuentres el problema. WOFF definitivamente debería funcionar en FF, entonces ese es un buen lugar para comenzar.
Finalmente, si nada de esto funciona, actualice FireFox. Escribí todo esto asumiendo que estás usando lo último; pero no especificó en qué versión está ingresando, así que ese también podría ser su problema.
Prueba esto....
Puede ser que no sea por tu código, es debido a tu configuración de Firefox.
Pruebe esto desde la Tool bar occidental a Unicode
View > Text Encoding > Unicode
Si está intentando importar fuentes externas, enfrenta uno de los problemas más comunes con Firefox y otros navegadores. Algunas veces su fuente funciona bien en Google Chrome o en uno de los otros navegadores, pero no en todos los navegadores.
Hay muchas razones para este tipo de error, una de las principales razones detrás de este problema es la fuente predefinida anterior. Debe agregar! Palabra clave importante después del final de cada línea de código CSS de la siguiente manera:
Ejemplo:
@font-face
{
font-family:"Hacen Saudi Arabia" !important;
src:url("../font/Hacen_Saudi_Arabia.eot?") format("eot") !important;
src:url("../font/Hacen_Saudi_Arabia.woff") format("woff") !important;
src: url("../font/Hacen_Saudi_Arabia.ttf") format("truetype") !important;
src:url("../font/Hacen_Saudi_Arabia.svg#HacenSaudiArabia") format("svg") !important;
}
.sample
{
font-family:"Hacen Saudi Arabia" !important;
}
Descripción: Ingrese el código anterior en su archivo o código CSS aquí. En el ejemplo anterior, reemplace "Hacen Saudi Arabia" con su familia de fuentes y reemplace la URL según el directorio de su fuente.
Si ingresa! Important en su navegador de códigos css, centre automáticamente en esta sección y anule la propiedad utilizada anteriormente. Para obtener más información, visite: https://answerdone.blogspot.com/2017/06/font-face-not-working-solution.html
Tal vez su problema sea un problema de nomenclatura, específicamente con respecto al uso (o no) de espacios y guiones.
Estaba teniendo un problema similar, que pensé que había solucionado al colocar las comillas opcionales ('') alrededor de los nombres de fuente / familia, pero eso de hecho implícitamente solucionó un problema de nomenclatura.
No estoy completamente actualizado en la especificación CSS, y hay (a mi entender) cierta ambigüedad en la forma en que los diferentes clientes interpretan las especificaciones. Además, también parece estar relacionado con las convenciones de nomenclatura de PostScript, pero, por favor, ¡corrígeme si me equivoco!
De todos modos, como lo entiendo ahora, su declaración está utilizando una mezcla de dos posibles sabores distintos.
@font-face {
font-family: "DroidSerif Regular";
Si consideras a Droid como el verdadero nombre de familia, del cual Sans y Serif son miembros, como por ejemplo sus hijos Sans Regular o Serif Bold , entonces o bien usas espacios en blanco para concaturar identificadores, O quitas espacios y usas CamelCasing para el familyName y los guiones para los identificadores secundarios.
Aplicado a su declaración, se vería algo como esto:
@font-face {
font-family: "Droid Serif Regular";
O
@font-face {
font-family: DroidSerif-Regular;
Creo que ambos deberían ser perfectamente legales, con o sin las comillas, pero he tenido un éxito desigual con eso entre varios clientes. Tal vez, algún día, tenga algo de tiempo para descubrir los detalles sobre este / estos isseu / s.
Encontré este artículo útil para comprender algunos de los aspectos involucrados: http://mathiasbynens.be/notes/unquoted-font-family
Este artículo tiene más detalles sobre PostScript específicamente y algunos enlaces a una especificación de Adobe PDF: http://rachaelmoore.name/posts/design/css/find-font-name-css-family-stack/
También podría ser el uso de la URL en la ruta de la etiqueta font-face. Si usa "http://dominio.com", no funciona en Firefox, para mí cambiarlo a "http://www.domain.com" funcionó.
Tenía exactamente este problema ejecutando ff4 en un mac. Tenía un servidor de desarrollo local ejecutándose y mi declaración @ font-face funcionó bien. Emigré para live y FF ''flasheo'' el tipo correcto en la carga de la primera página, pero cuando navego más profundo, el tipo de letra predeterminado en la hoja de estilos del navegador.
Encontré que la solución estaba en agregar la siguiente declaración a .htaccess
<FilesMatch "/.(ttf|otf|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
encontrado a via
Tuve el mismo problema y lo resolví agregando meta para contenido:
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
Esto sucede en Firefox y Edge si tienes textos Unicode en tu html.
Tuve exactamente el mismo problema. Tuve que crear una nueva carpeta llamada "fonts" y ponerla en wp_content. Puedo acceder desde mi navegador de esta manera http://www.example.com/wp-content/fonts/CANDY.otf
Anteriormente, la carpeta de fuentes estaba en el mismo directorio que mi archivo CSS, y @ font-face se veía así:
@font-face {
font-family: CANDY;
src: url("fonts/CANDY.otf");
}
Como mencioné anteriormente, esto no funcionaba en Firefox, sino solo con Chrome. Ahora está funcionando porque utilicé una ruta absoluta:
@font-face {
font-family: CANDY;
src: url("http://www.example.com/wp-content/fonts/CANDY.otf");
}
Tuve un problema similar. La página de prueba fontsquirel estaba trabajando en FF pero no en mi propia página, ¡aunque todos los archivos provenían del mismo dominio!
Resultó que estaba vinculando mi hoja de estilo con una URL absoluta (http://example.com/style.css), por lo que FF pensó que venía de un dominio diferente. Al cambiar mi enlace de la hoja de estilo href a /style.css, en lugar de arreglar cosas para mí.
Una solución fácil que nadie mencionó aún es incrustar la fuente directamente en el archivo css utilizando la codificación base64.
Si está utilizando fontsquirrel.com, en el Generador de kits de cara de fuente elija el modo experto , desplácese hacia abajo y seleccione Codificación Base64 en Opciones de CSS : el kit de fuentes descargado estará listo para conectarse y reproducirse.
Esto también tiene el beneficio marginal de reducir el tiempo de carga de la página porque requiere una solicitud HTTP menos.
Yo también tuve este problema. Encontré la respuesta aquí: http://www.dynamicdrive.com/forums/showthread.php?t=63628
Este es un ejemplo de la solución que funciona en Firefox, debe agregar esta línea a la fuente de su css:
src: local(font name), url("font_name.ttf");