422 votes

Pourquoi @ font-face lance-t-il une erreur 404 sur les fichiers woff?

Je suis de l'utilisation de @font-face sur mon site de l'entreprise et il fonctionne/ressemble beaucoup. Sauf Firefox et google Chrome une erreur 404 sur le .woff fichier. IE ne jette pas l'erreur. J'ai les polices situé à la racine mais j'ai essayé avec les polices dans le répertoire css et même donner l'adresse url de la police. Si vous supprimer les polices de mon fichier css, je n'obtiens une erreur 404, donc je sais que c'est pas une erreur de syntaxe.

Aussi, j'ai utilisé fontsquirrels outil pour créer le @font-face polices de caractères et le code:

@font-face 
{
font-family: 'LaurenCBrownRegular';
src: url('/laurencb-webfont.eot');
src: local(''), 
     url('/laurencb-webfont.woff') format('woff'), 
     url('/laurencb-webfont.ttf') format('truetype'), 
     url('/laurencb-webfont.svg#webfontaaFhOfws') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face 
{
font-family: 'FontinSansRegular';
src: url('/fontin_sans_r_45b-webfont.eot');
src: local(''), 
     url('/fontin_sans_r_45b-webfont.woff') format('woff'), 
     url('/fontin_sans_r_45b-webfont.ttf') format('truetype'), 
     url('/fontin_sans_r_45b-webfont.svg#webfontKJHTwWCi') format('svg');
font-weight: normal;
font-style: normal;
}

721voto

Ian Robinson Points 8666

J'ai été confronté à ce même symptôme - 404 sur woff fichiers en Chrome et était en cours d'exécution d'une application sur un Serveur Windows avec IIS 6.

Si vous êtes dans la même situation que vous pouvez y remédier en procédant de la manière suivante:

"Il suffit d'ajouter le suivant type MIME déclarations via le Gestionnaire des services internet (onglet en-Têtes HTTP de site web propriétés): .woff application/x-woff"

Mise à jour: selon les Types MIME pour les woff polices et Grsmto la réelle type MIME est application/x-font-woff (pour Chrome au moins). x-woff sera fix Chrome erreur 404, x-font-woff va réparer les avertissements Chrome.

IIS 6 MIME Types

Merci à Seb Duggan: http://sebduggan.com/posts/serving-web-fonts-from-iis

Vous pouvez également ajouter les types MIME dans le web config:

  <system.webServer>
    <staticContent>
      <remove fileExtension=".woff" /> <!-- In case IIS already has this mime type -->
      <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
    </staticContent>    
  </system.webServer>

44voto

Grsmto Points 1357

En fait, la réponse @Ian Robinson fonctionne bien, mais Chrome continuera à se plaindre avec ce message: " Ressource interprétée comme police mais transférée avec l'application de type MIME / x-woff "

Si vous obtenez cela, vous pouvez changer de

application / x-woff

à

application / x -font -woff

et vous n'aurez plus d'erreurs de console Chrome!

(testé sur Chrome 17)

0voto

Ecksley Points 56

Cela peut être évident, mais il m'a fait trébucher plusieurs fois avec 404 ... Assurez-vous que les permissions du dossier de polices sont correctement définies.

0voto

Dmitriy Romanov Points 73

Vérifiez également votre réécriture d'URL. Il peut lancer 404 si quelque chose de «bizarre» a été trouvé.

-1voto

dcp3450 Points 1824

Résolu:

J'ai dû utiliser la méthode Mo'Bulletproofer

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X