CSS @ font-face ne fonctionne pas avec Firefox, mais avec Chrome et IE
Le code suivant fonctionne dans Google Chrome beta ainsi que IE 7. Cependant, Firefox semble avoir un problème avec cela. Je soupçonne que la manière dont mes fichiers CSS sont inclus pose un problème, car je sais que Firefox n’est pas très favorable aux importations entre domaines.
Mais tout cela n’est que du HTML statique et il n’est pas question de domaine croisé.
Sur mon landing-page.html, je fais une importation CSS comme ceci:
<link rel="stylesheet" href="../css/main.css" type="text/css" media="screen, projection" />
Dans le fichier principal.css, j'ai une autre importation comme celle-ci:
@import url("reset.css");
@import url("style.css");
@import url("type.css");
et dans le type.css j'ai les déclarations suivantes:
@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; }
J'ai un répertoire appelé "font" au même emplacement que type.css. Ce répertoire de polices contient tous les fichiers woff/ttf/svg, etc.
Je suis perplexe sur celui-ci. Cela fonctionne dans Chrome et IE mais pas sur Firefox. Comment est-ce possible? Qu'est-ce que je rate?
COURIR LOCALEMENT LE SITE (file:///)
Firefox est livré avec une règle très stricte "fichier uri Origin" (file:///) par défaut: pour qu’elle se comporte comme les autres navigateurs, allez à about:config, filtrez par fileuri et basculez le préférence suivante:
security.fileuri.strict_Origin_policy
Définissez-la sur false et vous devriez pouvoir charger des ressources de polices locales sur différents niveaux de chemin.
SITE PUBLIÉ
Selon mon commentaire ci-dessous, et vous rencontrez ce problème après le déploiement de votre site, vous pouvez essayer d'ajouter un en-tête supplémentaire pour voir si votre problème se configure lui-même en tant que problème interdomaine: cela ne devrait pas, puisque vous spécifiez des chemins relatifs, mais je voudrais quand même essayer: dans votre fichier .htaccess, indiquez que vous souhaitez envoyer un en-tête supplémentaire pour chaque fichier .ttf/.otf/.eot demandé:
<FilesMatch "\.(ttf|otf|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
Franchement, je ne m'attendrais pas à ce que cela fasse une différence, mais c'est tellement simple que ça vaut la peine d'essayer: sinon, essayez d'utiliser l'encodage en base64 pour votre police, moche, mais cela peut aussi fonctionner .
Un récapitulatif de Nice est disponible ici
En plus d’ajouter ce qui suit à votre .htaccess: (merci @Manuel)
<FilesMatch "\.(ttf|otf|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
Vous voudrez peut-être essayer d’ajouter explicitement les types mime de webfont au fichier .htaccess ... comme ceci:
AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff
Au final, mon fichier .htaccess ressemble à ceci (pour la section qui permet aux webfonts de fonctionner dans tous les navigateurs)
# 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
J'ai eu ce problème aussi. J'ai trouvé la réponse ici: http://www.dynamicdrive.com/forums/showthread.php?t=63628
Ceci est un exemple de la solution qui fonctionne sur firefox, vous devez ajouter cette ligne à votre police css:
src: local(font name), url("font_name.ttf");
J'ai eu exactement le même problème. Je devais créer un nouveau dossier appelé "polices" et le mettre dans wp_content. Je peux y accéder depuis mon navigateur comme ceci http://www.example.com/wp-content/fonts/CANDY.otf =
Auparavant, le dossier des polices était dans le même répertoire que mon fichier CSS, et le @ font-face ressemblait à ceci:
@font-face {
font-family: CANDY;
src: url("fonts/CANDY.otf");
}
Comme je l'ai mentionné ci-dessus, cela ne fonctionnait pas dans Firefox, mais uniquement avec Chrome. Maintenant cela fonctionne parce que j'ai utilisé un chemin absolu:
@font-face {
font-family: CANDY;
src: url("http://www.example.com/wp-content/fonts/CANDY.otf");
}
J'ajouterais que certaines polices ont des problèmes avec Firefox si leur nom de fichier contient des caractères spécifiques. J'ai récemment rencontré un problème avec la police 'Modulus' qui portait le nom de fichier '237D7B_0_0'. Supprimer les caractères de soulignement dans le nom de fichier et mettre à jour le fichier css pour qu'il corresponde au nouveau nom de fichier a résolu ce problème. Ce problème est très curieux dans les autres polices ayant des caractères similaires. Probablement un bogue dans Firefox. Je vous recommande de conserver les noms de fichiers uniquement en caractères alphanumériques.
J'avais le même problème. Vérifiez deux fois votre code pour H1, H2 ou le style que vous ciblez avec la règle @ font-face. J'ai trouvé qu'il me manquait un coma après font-family: 'custom-font-family' Arial, Helvetica etc Il se présentait bien dans tous les navigateurs, à l'exception de Firefox. J'ai ajouté le coma et cela a fonctionné.
Je vais laisser cela ici parce que mon collègue a trouvé une solution à un problème connexe "font-face ne fonctionne pas sur firefox mais partout ailleurs".
Le problème venait juste de la confusion de Firefox avec la déclaration de la famille de polices, qui a finalement été corrigée:
body{ font-family:"MyFont" !important; }
PS: J'utilisais aussi html5boilerplate.
Une solution simple, que personne n’a encore mentionnée, consiste à incorporer la police directement dans le fichier css à l’aide du codage base64.
Si vous utilisez fontsquirrel.com, dans le générateur de kits font-face, choisissez mode expert, faites défiler vers le bas et sélectionnez Encodage en Base64 sous Options CSS - le kit de polices téléchargé sera prêt à être branché et lu.
Cela a également pour avantage marginal de réduire le temps de chargement des pages car il nécessite une demande http de moins.
J'ai eu exactement ce problème en cours d'exécution ff4 sur un mac. J'avais un serveur de développement local en cours d'exécution et ma déclaration @ font-face a bien fonctionné. J'ai migré en direct et FF clignotait avec le type correct lors du chargement de la première page, mais lors d'une navigation plus profonde, la police de caractère par défaut de la feuille de style du navigateur.
J'ai trouvé la solution en ajoutant la déclaration suivante à .htaccess
<FilesMatch "\.(ttf|otf|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
trouvé via
Pour cette police en particulier, vous devriez utiliser l'API de police de Google:
http://code.google.com/webfonts/family?family=Droid+Sans
Si vous souhaitez toujours utiliser le générateur de kit de FontSquirrel, utilisez l’option Smiley hack pour éliminer les problèmes de polices locales. Après avoir généré un kit, vérifiez que le fichier demo.html généré fonctionne dans FireFox. Je parie que si. Maintenant, chargez-le sur votre serveur - je parie que cela fonctionne aussi car FontSquirrel est génial.
Cependant, si vous avez cassé le code du kit généré lors de son intégration dans votre projet, utilisez les méthodes standard de débogage: recherchez 404 et allez ligne par ligne jusqu'à ce que vous trouviez le problème. WOFF devrait définitivement travailler en FF, alors c’est un bon point de départ.
Enfin, si rien ne fonctionne, mettez à jour FireFox. J'ai écrit tout cela en supposant que vous utilisiez la dernière version; mais vous n'avez pas spécifié la version que vous archivez, ce qui pourrait également poser problème.
Essayez de modifier la déclaration de source locale dans vos directives @font-face.
Il existe un bogue connu dans Firefox ou dans l'API de police Google qui empêche l'utilisation des variantes de police si la police est installée localement et qui correspond au nom local défini:
http://code.google.com/p/googlefontdirectory/issues/detail?id=1
Pour rendre la déclaration locale plus efficace, il suffit que votre chaîne source locale devienne un non-sens. La convention généralement acceptée consiste à utiliser le caractère unicode smiley ("☺"). Pourquoi? Paul Irish a une bonne explication sur son blog:
Est-ce que vous testez cela dans des fichiers locaux ou sur un serveur Web? Les fichiers de différents répertoires sont considérés comme des domaines différents pour les règles entre domaines. Par conséquent, si vous testez localement, vous risquez de rencontrer des restrictions entre domaines.
Sinon, il serait probablement utile de pointer vers une URL où le problème se produit.
En outre, je suggérerais de consulter la console d’erreur Firefox pour voir si des erreurs de syntaxe CSS ou d’autres erreurs sont signalées.
De plus, je ferais remarquer que vous voulez probablement une police de caractères: gras dans la deuxième règle @ font-face.
J'avais le même problème à faire afficher correctement une police dans Firefox. Voici ce que j'ai trouvé pour travailler pour moi. Ajoutez une barre oblique avant le répertoire contenant la police dans l'attribut url. Voici mes versions avant et après:
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);
}
remarquez la barre oblique avant les "polices" dans l'URL? Cela indique au navigateur de démarrer à partir du répertoire racine, puis d'accéder à la ressource. Au moins pour moi - Problème résolu.
L'utilisation d'une règle .htaccess Autoriser l'origine de contrôle d'accès ne fonctionnait pas pour moi lorsque j'ai été confronté à ce problème.
Au lieu de cela, dans IIS de web.config, insérez le bloc system.webServer indiqué ci-dessous.
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
</customHeaders>
</httpProtocol>
</system.webServer>
</configuration>
Cela a fonctionné comme un charme pour moi. Si vous devez restreindre l'accès à un domaine particulier, remplacez le * par le domaine.
C’est pour cette raison qu’il s’agit de l’un des meilleurs résultats de Google pour ce problème. J'aimerais ajouter ce qui a résolu ce problème pour moi:
Je devais supprimer le format (opentype) de la src de font-face, puis cela fonctionnait également dans Firefox. Cela fonctionnait très bien dans Chrome et Safari auparavant.
Pas besoin de perdre son temps avec les paramètres, supprimez simplement les guillemets et les espaces de la famille de polices:
cette
body {font-family: "DroidSerif Regular", serif; }
devient ceci
body {font-family: DroidSerifRegular, serif; }
Pouvez-vous vérifier avec Firebug si vous obtenez 404? J'ai eu des problèmes lors de la passe et j'ai trouvé que l'extension était la même, mais linux file.ttf est différent de file.TTF ... et cela fonctionnait avec tous les navigateurs sauf Firefox.
J'espère que ça aide!
Votre problème est peut-être un problème de nommage, en particulier en ce qui concerne l'utilisation (ou non) des espaces et des traits d'union.
J'avais un problème similaire, que je pensais avoir corrigé en plaçant les guillemets facultatifs (') autour des noms de famille/police, mais qui a en réalité corrigé implicitement un problème de dénomination.
Je ne suis pas complètement au courant de la spécification CSS, et il existe (selon moi) une certaine ambiguïté dans la façon dont différents clients interprètent les spécifications. En outre, cela semble également lié aux conventions de nommage PostScript, mais corrigez-moi si je me trompe!
Quoi qu'il en soit, si je comprends bien maintenant, votre déclaration utilise un mélange de deux saveurs distinctes possibles.
@font-face {
font-family: "DroidSerif Regular";
Si vous envisagiez Droid le nom de famille actuel, dont Sans et Serif sont membres, tout comme par exemple leurs enfants Sans Regular ou Serif Bold , vous devez alors utiliser des espaces partout pour concatiner des identificateurs, OR vous supprimez des espaces et utilisez CamelCasing pour le nom de famille et des traits d'union pour les sous-identificateurs.
Appliqué à votre déclaration, cela ressemblerait à ceci:
@font-face {
font-family: "Droid Serif Regular";
OR
@font-face {
font-family: DroidSerif-Regular;
Je pense que les deux devraient être parfaitement légaux, avec ou sans les guillemets, mais j'ai eu un succès mitigé avec celui de divers clients. Peut-être qu’un jour j’aurai le temps de comprendre les détails de ce/ces isseu/s.
J'ai trouvé cet article utile pour comprendre certains des aspects en jeu: http://mathiasbynens.be/notes/unquoted-font-family
Cet article contient plus de détails sur PostScript, ainsi que des liens vers un document PDF de spécification Adobe: http://rachaelmoore.name/posts/design/css/find-font-name-css-family-stack/
J'avais un problème similaire. La page de démonstration de fontsquirel fonctionnait en FF, mais pas ma propre page, même si tous les fichiers provenaient du même domaine!
Il s'est avéré que je liais ma feuille de style à une URL absolue (http://example.com/style.css), alors FF pensait que cela venait d'un domaine différent. Changer mon lien de feuille de style href en /style.css a corrigé les choses pour moi.
Dans mon cas, j’ai eu un problème avec l’insertion de code de style font-face
<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>
directement dans l'en-tête de votre page index.html ou php, dans la balise style. Travaille pour moi!
Peut-être que ce n'est pas à cause de votre code, c'est à cause de votre configuration de Firefox.
Essayez ceci de Tool barWestern à nicode
View > Text Encoding > Unicode
Ceci est un problème avec la façon dont vous configurez les chemins de votre fonte-face. Puisque vous n'avez pas commencé le chemin avec un "/", Firefox essaiera de trouver la police en fonction du chemin dans lequel se trouve la feuille de style. Donc, Firefox recherche votre police dans le répertoire "racine/css/font" au lieu de le répertoire "root/font". Vous pouvez facilement résoudre ce problème en déplaçant le dossier de polices dans le dossier css ou en ajoutant un/au début de vos chemins de polices.
Essayez ceci:
@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";
}
J'ai eu le même problème et l'ai résolu en ajoutant des méta pour le contenu:
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
Cela se produit dans Firefox et Edge si vous avez des textes Unicode dans votre code HTML.
Si vous essayez d'importer des polices externes, vous rencontrez l'un des problèmes les plus courants avec Firefox et les autres navigateurs. Parfois, votre police fonctionne bien dans Google Chrome ou dans l’un des autres navigateurs, mais pas dans tous.
Il y a beaucoup de raisons pour ce type d'erreur, l'une des principales raisons de ce problème est la police précédente définie précédemment. Vous devez ajouter le mot clé! Important après la fin de chaque ligne de code CSS, comme indiqué ci-dessous:
Exemple:
@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;
}
Description: Entrez le code ci-dessus dans votre fichier CSS ou le code ici. Dans l'exemple ci-dessus, remplacez "Hacen Saudi Arabia" par votre famille de polices et remplacez l'URL selon votre répertoire de polices.
Si vous entrez! Important dans votre navigateur de code CSS, concentrez-vous automatiquement sur cette section et remplacez la propriété précédemment utilisée. Pour plus de détails, visitez: https://answerdone.blogspot.com/2017/06/font-face-not-working-solution.html