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

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 pouvez essayer d'ajouter explicitement les types mime de webfont à la .fichier htaccess... comme ceci:

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff

À la fin, mon .htaccess file ressemble à ceci (pour la section qui permet à 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

C'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. J'ai dû 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 fonts é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, ce n'était pas travailler dans Firefox mais seulement 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");
}

je vais juste laisser cela ici parce que mon collègue a trouvé une solution pour un problème connexe" police-face ne travaille pas sur firefox mais partout ailleurs".

le problème était juste Firefox gâcher avec la déclaration font-Famille, ce qui a fini par réparer:

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

PS: j'utilisais aussi html5boilerplate.

je mentionnerais que certaines polices ont des problèmes dans firefox si leur nom de fichier contient des caractères spécifiques. J'ai récemment un problème avec la police 'Module' qui avait un nom de fichier '237D7B_0_0'. Supprimer les underscores dans le nom de fichier et mettre à jour le css pour correspondre au nouveau nom de fichier a résolu ce problème. D'autres polices avec des caractères similaires n'ont pas ce problème qui est très curieux...probablement un insecte dans firefox. Je recommande de garder des noms de fichiers uniquement pour les caractères alphanumériques.

j'avais le même problème. Vérifiez votre code pour H1, H2 ou n'importe quel style que vous ciblez avec la règle @font-face. J'ai découvert qu'il me manquait un coma après font-family: 'custom-font-family' Arial, Helvetica etc il apparaissait très bien dans tous les navigateurs à part Firefox. J'ai ajouté le coma et ça a marché.

pour cette police en particulier, vous devez utiliser L'API Google Font:

http://code.google.com/webfonts/family?family=Droid+Sans

si vous voulez toujours utiliser le générateur de kit de FontSquirrel, utilisez L'option de hack Smiley pour éliminer les problèmes de polices locales. Après avoir généré un kit, vérifiez que la démo générée.les travaux html dans FireFox. Je parie qu'il fait. Maintenant, téléchargez - le sur votre serveur -- je parie qu'il fonctionne là aussi depuis FontSquirrel est génial.

cependant, si vous avez cassé le code du kit généré en l'intégrant dans votre projet, utilisez les méthodes standard de débogage -- vérifiez les 404 et allez ligne par ligne jusqu'à ce que vous trouviez le problème. WOFF devrait certainement travailler en FF, donc c'est un bon endroit pour commencer.

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

essayez le nerf de la déclaration source locale dans vos directives @font-face .

il y a un bug connu dans Firefox ou 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 rendre efficace la déclaration locale, il suffit de faire votre une histoire de source locale. La convention généralement acceptée pour cela est d'utiliser un caractère unicode smiley ( "☺" ). Pourquoi? Paul Irish a une bonne explication sur son blog:

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

j'ai eu exactement ce problème d'exécution ff4 sur un mac. J'avais un serveur de développement local qui fonctionnait et ma déclaration @font-face fonctionnait très bien. J'ai migré pour vivre et FF "flash" le type correct sur la charge de première page, mais lors de la navigation plus profonde la police est passée par défaut à 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

une solution facile que personne n'a mentionnée jusqu'à présent est d'intégrer la police directement dans le fichier css en utilisant l'encodage base64.

si vous utilisez fontsquirrel.com, dans le Générateur de polices de caractères, Choisissez mode expert , faites défiler vers le bas et sélectionnez base64 Encode sous Options CSS - la police de caractères téléchargée sera prête à être branchée et jouée.

cela a également l'avantage marginal de réduction du temps de chargement de la page car il nécessite une requête http de moins.

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

sinon, il serait probablement utile d'être pointé vers une URL où le problème se produit.

aussi, je suggère de regarder la console D'erreurs Firefox pour voir si des erreurs de syntaxe CSS ou d'autres erreurs sont rapportées.

aussi, je note que vous voulez probablement police-weight: bold dans la règle second @font-face.

utilisant un .htaccess Access Control Allow Origin rule n'a pas fonctionné pour moi lorsque j'ai été confronté à ce problème.

à la place, dans IIS sur le web.config insère le système.serveur de bloc 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 avez besoin de restreindre l'accès à un domaine en 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é à travailler pour moi. Ajouter 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);
}

vous remarquez la barre oblique avant 'fonts' dans l'url? Cela indique au navigateur de commencer par le répertoire racine et d'accéder ensuite à la ressource. Au moins pour moi, le Problème est Résolu.

Pouvez-vous vérifier avec firebug si vous obtenez certains 404? J'ai eu des problèmes dans le pass et j'ai trouvé que l'extension était le même que le fichier linux.ttf est différente à partir d'un fichier.TTF... et cela a fonctionné avec tous les navigateurs sauf firefox.

J'aimerais que ça aide!

C'est un problème avec la façon dont vous configurez les chemins de votre face de police. Puisque vous n'avez pas démarré le chemin avec un "/", Firefox tentera de trouver la police basée sur le chemin de la feuille de style. Donc, en gros, Firefox recherche votre police dans le répertoire" root/css/font "au lieu du répertoire" root/font". Vous pouvez facilement corriger cela en déplaçant le dossier font 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";
}

essayez ceci....

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

j'ai eu un problème similaire. La page démo de fontsquirel fonctionnait en FF mais pas sur 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 avec une URL absolue (http://example.com/style.css) donc FF a pensé qu'il venait d'un autre domaine. Changer le lien de ma feuille de style href vers / style.CSS à la place réparé des choses pour moi.

peut-être que votre problème est une question de nom, spécifiquement en ce qui concerne l'utilisation (ou non) d'espaces et de traits d'Union.

j'avais le problème de similair, que je pensais avoir corrigé en plaçant l'option guillemets (') autour de font-/noms de famille, mais qui en fait a fixé implicitement un problème de nom.

Je ne suis pas complètement à jour sur la spécification CSS, et il y a (au moins pour moi) une certaine ambiguïté dans la façon dont les différents clients interpréter les spécifications. En outre, il semble également lié aux conventions de nommage PostScript, mais s'il vous plaît corriger moi si je me trompe!

D'après ce que j'ai compris, votre déclaration utilise un mélange de deux saveurs distinctes possibles.

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

si vous considérez Droid le nom de famille réel, dont Sans et Serif sont membres, juste comme par exemple leurs enfants Sans Regular ou Serif Bold , alors vous utilisez des espaces partout pour concatiner des identificateurs, ou vous supprimez des espaces et utilisez CamelCasing pour le nom de famille, et les traits d'Union pour les sous-identificateurs.

appliqué à votre déclaration, il ressemblerait à quelque chose comme ceci:

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

ou

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

je pense que les deux devraient être parfaitement légal, avec ou sans les citations, mais j'ai eu un succès mitigé avec ça entre différents clients. Peut-être qu'un jour, j'aurai un peu de temps pour comprendre les détails de ces questions.

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

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

Pas besoin de se compliquer la vie avec des paramètres il suffit de retirer les guillemets et les espaces de la font-family:

ce

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

devient ce

body {font-family: DroidSerifRegular, serif; }

dans mon cas, j'ai négligé le problème avec l'insertion du code de style police-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 sur votre index.page html ou php, en style tag. Fonctionne pour moi!

, Parce que c'est l'un des meilleurs résultats de 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-face, puis il a fonctionné dans Firefox aussi. Ça marchait bien dans le Chrome et le Safari avant ça.

peut être son pas à cause de votre code, Son à cause de votre configuration Firefox.

Essayez ceci à partir de Tool bar de l'Ouest à Unicode

View > Text Encoding > Unicode

si vous essayez d'importer des polices externes, vous rencontrez l'un des problèmes les plus courants avec votre navigateur Firefox et un autre. Quelque temps, votre police fonctionne bien, google Chrome ou un autre navigateur, mais pas dans tous les navigateurs.

il y a beaucoup de raisons pour ce type d'erreur une des raisons les plus importantes derrière ce problème est précédent par police définie. Vous devez ajouter !mot clé important après la fin de votre 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 le code ici. Dans l'exemple ci-dessus, remplacez "Hacen Saudi Arabia" par votre police-famille et remplacez url selon votre répertoire de police.

si vous entrez !important dans votre navigateur de code css, concentrez-vous automatiquement sur cette section et outrepassez la propriété déjà utilisée. Pour plus de détails visitez: https://answerdone.blogspot.com/2017/06/font-face-not-working-solution.html

j'ai eu le même problème et je l'ai résolu en ajoutant meta 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 comme 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 face de syntaxe de police à l'épreuve des balles à partir d'une seule police.

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

pourrait aussi être l'utilisation de l'URL dans le chemin de la police-face tag. Si vous utilisez "http://domain.com" ça ne marche pas à Firefox, pour moi le changer en "http://www.domain.com" ça a marché.

mon problème est que Windows a nommé la police.TTF 'et firefox expected' font.ttf' j'ai vu qu'après avoir ouvert mon projet sous linux, renommé la police en propper et tout fonctionne""