CSS @ font-face ne fonctionne pas avec Firefox, mais fonctionne avec Chrome et IE

Le code suivant fonctionne dans Google Chrome bêta ainsi que dans IE 7. Cependant, Firefox semble avoir un problème avec cela. Je soupçonne que c'est un problème de la façon dont mes fichiers CSS sont inclus, car je sais que Firefox n'est pas trop amical à propos des importations inter-domaines.

Mais tout cela n'est que du HTML statique et il n'est pas question de cross-domaine.

Sur ma landing-page.html, je fais un import CSS comme ceci:

<link rel="stylesheet" href="../css/main.css" type="text/css" media="screen, projection" />

Dans le fichier main.css, j'ai une autre importation comme ceci:

@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 endroit 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?

EXÉCUTION LOCALE DU SITE ( file:///)

Firefox est livré avec une politique "file uri origin" ( file:///) très stricte par défaut: pour qu'il se comporte comme les autres navigateurs, accédez à about:config, filtrez fileuriet activez la préférence suivante:

security.fileuri.strict_origin_policy

Définissez-le sur false et vous devriez pouvoir charger les 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 comme un problème interdomaine: il ne devrait pas, puisque vous spécifiez des chemins relatifs, mais j'essaierais quand même: dans votre fichier .htaccess, spécifiez que vous voulez 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 si simple qu'il vaut la peine d'essayer: sinon essayez d'utiliser l' encodage base64 pour votre police de caractères, moche mais cela peut aussi fonctionner.

Un joli récapitulatif 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 polices Web 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 polices web 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 aussi eu ce problème. 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 face css:

src: local(font name), url("font_name.ttf");

Je vais juste laisser cela ici parce que mon collègue a trouvé une solution pour un problème "de police qui ne fonctionne pas sur Firefox mais partout ailleurs".

Le problème était juste que Firefox gâchait la déclaration de la famille de polices, cela a fini par le corriger:

body{ font-family:"MyFont" !important; }

PS: J'utilisais également html5boilerplate.

J'avais le même problème. Vérifiez votre code pour H1, H2 ou tout autre 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 etcqu'il se présentait bien dans tous les navigateurs à l'exception de Firefox. J'ai ajouté le coma et ça a marché.

J'ai eu exactement le même problème. J'ai dû créer un nouveau dossier appelé "polices" et le mettre dans wp_content. Je peux y accéder à partir de mon navigateur comme ceci http://www.example.com/wp-content/fonts/CANDY.otf

Auparavant, le dossier des polices se trouvait 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 ça marche car j'ai utilisé un chemin absolu:

@font-face { 
    font-family: CANDY;
    src: url("http://www.example.com/wp-content/fonts/CANDY.otf");
}

J'ai eu exactement ce problème en exécutant 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é pour vivre et FF «flasherait» le type correct lors du chargement de la première page, mais lors de la navigation plus profonde, la police de caractères par défaut était la feuille de style du navigateur.

J'ai trouvé que la solution consistait à ajouter la déclaration suivante à .htaccess

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

trouvé via

Une solution simple que personne n'a encore mentionnée est d'incorporer la police directement dans le fichier css en utilisant l'encodage base64.

Si vous utilisez fontsquirrel.com, dans le générateur de kit de polices, choisissez le mode expert , faites défiler vers le bas et sélectionnez Encodage Base64 sous Options CSS - le kit de polices téléchargé sera prêt à être branché et lu .

Cela a également l'avantage de réduire le temps de chargement des pages car il nécessite une demande http en moins.

Je mentionnerais 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 avait un nom de fichier '237D7B_0_0'. La suppression des traits de soulignement dans le nom de fichier et la mise à jour du CSS pour correspondre au nouveau nom de fichier ont résolu ce problème. Les autres polices avec des caractères similaires n'ont pas ce problème qui est très curieux ... probablement un bug dans Firefox. Je recommande de conserver les noms de fichiers uniquement avec des caractères alphanumériques.

Pour cette police en particulier, vous devez utiliser l'API Google Font:

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 de piratage Smiley pour éliminer les problèmes de police locale. Après avoir généré un kit, vérifiez que le demo.html généré fonctionne dans FireFox. Je parie que oui. Maintenant, télé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 - vérifiez les 404 et continuez ligne par ligne jusqu'à ce que vous trouviez le problème. WOFF devrait certainement fonctionner dans FF, c'est donc un bon point de départ.

Enfin, si rien de tout cela ne fonctionne, mettez à jour FireFox. J'ai écrit tout cela en supposant que vous utilisez la dernière version; mais vous n'avez pas spécifié la version que vous archivez, cela pourrait donc aussi être votre problème.

Essayez de nerfing la déclaration de source locale dans vos @font-facedirectives.

Il existe un bogue connu dans Firefox ou dans l'API Google Font qui empêche les variantes de polices à utiliser si la police est installée localement et correspond au nom local défini:

http://code.google.com/p/googlefontdirectory/issues/detail?id=13

Pour nerf efficacement la déclaration locale, il suffit de faire de votre chaîne source locale un non-sens. La convention généralement acceptée pour cela consiste à utiliser le caractère unicode souriant ( "☺"). Pourquoi? Paul Irish a une excellente explication sur son blog:

http://paulirish.com/2010/font-face-gotchas/#smiley

Testez-vous cela dans des fichiers locaux ou sur un serveur Web? Les fichiers dans différents répertoires sont considérés comme des domaines différents pour les règles inter-domaines, donc si vous testez localement, vous pourriez rencontrer des restrictions inter-domaines.

Sinon, il serait probablement utile de pointer vers une URL où le problème se produit.

En outre, je suggère de regarder la console d'erreur Firefox pour voir si des erreurs de syntaxe CSS ou d'autres erreurs sont signalées.

En outre, je noterais que vous voulez probablement un poids de police: gras dans la deuxième règle @ font-face.

L'utilisation d'une règle .htaccess Access Control Allow Origin ne fonctionnait pas pour moi lorsque j'étais confronté à ce problème.

Au lieu de cela, dans IIS dans le web.config, insérez le bloc system.webServer illustré 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 * par le domaine.

J'avais le même problème pour obtenir une police à afficher correctement 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 «polices» dans l'url? Cela indique au navigateur de démarrer dans le répertoire racine, puis d'accéder à la ressource. Au moins pour moi - Problème résolu.

Si vous essayez d'importer des polices externes, vous rencontrez l'un des problèmes les plus courants avec votre navigateur Firefox et autres. Parfois, votre police fonctionne bien dans Google Chrome ou l'un des autres navigateurs, mais pas dans tous les navigateurs.

Il y a beaucoup de raisons à ce type d'erreur, l'une des principales raisons de ce problème est la précédente police par définition. Vous devez ajouter! Un mot clé important après la fin de chaque ligne de code CSS comme 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 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

Pouvez-vous vérifier avec Firebug si vous obtenez quelque 404? J'ai eu des problèmes dans 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.

Je souhaite que cela aide!

Il s'agit d'un problème avec la façon dont vous configurez les chemins d'accès de votre police. Puisque vous n'avez pas commencé le chemin avec un "/", Firefox tentera de trouver la police en fonction du chemin dans lequel se trouve la feuille de style. Donc, fondamentalement, Firefox recherche votre police dans le répertoire "root / 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 vers le dossier css ou en ajoutant un / au début de vos chemins de police.

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";
}

Essaye ça....

http://geoff.evason.name/2010/05/03/cross-domain-workaround-for-font-face-and-firefox/

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), FF a donc pensé qu'elle provenait d'un domaine différent. Changer mon lien de feuille de style href en /style.css a plutôt corrigé les choses pour moi.

Votre problème est peut-être un problème de dénomination, en particulier en ce qui concerne l'utilisation (ou non) des espaces et des tirets.

J'avais un problème similaire, que je pensais avoir résolu en plaçant les guillemets facultatifs (') autour des noms de police / famille, mais cela a implicitement résolu un problème de dénomination.

Je ne suis pas complètement à jour sur la spécification CSS, et il y a (du moins pour moi) une certaine ambiguïté dans la façon dont les différents clients interprètent les spécifications. En outre, il semble également lié aux conventions de dénomination PostScript, mais veuillez me corriger 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 considérez Droid comme le vrai nom de famille, dont Sans et Serif sont membres, tout comme par exemple leurs enfants Sans Regular ou Serif Bold , alors vous utilisez soit des espaces partout pour concaténer les identifiants, OU vous supprimez des espaces et utilisez CamelCasing pour le nom de famille et les tirets pour les sous-identificateurs.

Appliqué à votre déclaration, il ressemblerait à ceci:

@font-face {
  font-family: "Droid Serif Regular";

OU

@font-face {
  font-family: DroidSerif-Regular;

Je pense que les deux devraient être parfaitement légaux, avec ou sans les devis, mais j'ai eu un succès mitigé avec celui entre divers clients. Peut-être qu'un jour, j'ai le temps de comprendre les détails de ce / ces isseu / s.

J'ai trouvé cet article utile pour comprendre certains des aspects impliqués: http://mathiasbynens.be/notes/unquoted-font-family

Cet article contient plus de détails sur PostScript en particulier, et quelques liens vers une spécification Adobe PDF: http://rachaelmoore.name/posts/design/css/find-font-name-css-family-stack/

Pas besoin de jouer avec les paramètres, il suffit de supprimer les guillemets et les espaces de la famille de polices:

ce

body {font-family: "DroidSerif Regular", serif; }

devient ceci

body {font-family: DroidSerifRegular, serif; }

Dans mon cas, j'ai résolu le problème d'insertion de code de style de police

<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 de style. Travaille pour moi!

Pour cette raison, c'est l'un des meilleurs résultats Google pour ce problème, je voudrais ajouter ce qui a résolu ce problème pour moi:

J'ai dû supprimer le format (opentype) du src de la police, puis cela a également fonctionné dans Firefox. Cela fonctionnait bien dans Chrome et Safari avant cela.

Peut-être que ce n'est pas à cause de votre code, c'est à cause de votre configuration Firefox.

Essayez ceci de Tool bar Western à Unicode

View > Text Encoding > Unicode

J'ai eu le même problème et je l'ai résolu en ajoutant une 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 html.

Je ne sais pas comment vous avez créé la syntaxe car je n'ai jamais utilisé svg dans la déclaration de police, mais Font Squirel a un très bon outil pour créer une police de caractères à l'épreuve des balles à partir d'une seule police.

http://www.fontsquirrel.com/fontface/generator

Cela pourrait également être l'utilisation de l'URL dans le chemin de la balise font-face. Si vous utilisez "http://domain.com" cela ne fonctionne pas dans Firefox, pour moi le changer en "http://www.domain.com" a fonctionné.

Mon problème était que Windows a nommé la police 'font.TTF' et que Firefox attendait 'font.ttf'. J'ai vu qu'après avoir ouvert mon projet sous linux, renommé la police en nom propper et tout fonctionne