Forum : Compatibilité font-face pour firefox ?

Bonjour,

Je me bute à un petit soucis quand à l'intégration d'une police d'écriture sur mon projet.
Je respecte pourtant bien la syntaxe et les formats de police pour cette propriété.

voici le bout du css concernée

@font-face {
    font-family: 'icomoon';
    src: url('../fonts/icomoon.eot');
    src: url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
         url('../fonts/icomoon.ttf') format('truetype'),
         url('../fonts/icomoon.woff') format('woff'),
         url('../fonts/icomoon.svg#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'harabara';
    src: url('../fonts/harabara.eot');
    src: url('../fonts/harabara.eot?#iefix') format('embedded-opentype'),
         url('../fonts/harabara.woff2') format('woff2'),
         url('../fonts/harabara.woff') format('woff'),
         url('../fonts/harabara.ttf') format('truetype'),
         url('../fonts/harabara.svg#harabara') format('svg');
    font-weight: normal;
    font-style: normal;
}

Il est a noter que je souhaite intégrer des polices d'écritures et des polices iconiques sur firefox.
Ce code marche sur tous les autres navigateurs que j'ai essayé (chrome, ie, edge, opéra et safari)

Mais quand j'affiche ma page sur firefox j'obtiens ce genre de caractère pour les icones :
http://hpics.li/ec5f679
et une police classique sérif pour le texte.

Je cherche donc un moyen pour que mes polices personnalisées fonctionne sur firefox.
Merci d'avance de votre aide

Genki

Réponse acceptée

Dans firefox, tape

about:config

Cherche : fileuri
Et met à FALSE :

security.fileuri.strict_origin_policy

nico41

tu dois ajouter un header dans les configurations de ton serveur, exemple pour nginx :

server{
...
     location ~* \.(eot|otf|ttf|woff|svg)$ {
          add_header "Access-Control-Allow-Origin" "*";
          ...
     }
...
}

Pour tous les fichiers avec les extensions entre parenthèse, le serveur envoi le header Access-Control-Allow-Origin avec la valeur étoile
Cela reglera ton problème sur firefox.
Je ne connais pas la config pour Apache mais je pense que tu pourras trouver avec Apache + Access-Control-Allow-Origin + firefox +font

Huggy

Ton lien ne fonctionne pas, peux-tu corriger stp ?

Masso

Auteur

Merci pour vos réponses,
mon lien marche encore Huggy c'est juste que l'image est petite.

Okay nico41 mais le problème c'est que je débute et je travail en local sans serveur. N'y a t'il vraiment pas moyen d'afficher ce que je veux
sur firefox sans être à ce stade ? (j'ai tenté sur un autre pc aussi, sans changement)
Si non bah je continue sous chrome même si je prefère utiliser FF.

Merci pour vos réponses.

Masso

Auteur

Super, merci Genki :)

Compatibilité font-face pour firefox ?

5 réponses