Pourquoi @font-face génère-t-il une erreur 404 sur les fichiers woff ?

Question

J'utilise @font-face sur le site de mon entreprise et cela fonctionne/est très bien. Sauf que Firefox et Chrome affichent une erreur 404 sur le site de l'entreprise. .woff fichier. IE n'affiche pas l'erreur. Les polices sont situées à la racine, mais j'ai essayé de les placer dans le dossier css et même de donner l'URL complète de la police. Si je supprime ces polices de mon fichier css, je n'obtiens pas de message 404, ce qui me permet de savoir qu'il ne s'agit pas d'une erreur de syntaxe.

De plus, j'ai utilisé l'outil fontsquirrels pour créer les @font-face les polices 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;
}

Answer 1

Je rencontrais le même symptôme - 404 sur les fichiers woff dans Chrome - et j'exécutais une application sur un serveur Windows avec IIS 6.

Si vous vous trouvez dans la même situation, vous pouvez y remédier en procédant comme suit :

Solution 1

"Il suffit d'ajouter les déclarations de type MIME suivantes via IIS Manager (onglet HTTP Headers des propriétés du site Web) : .woff application/x-woff "

Mise à jour : en fonction de Types MIME pour les polices woff y Grsmto le type MIME réel est application/x-font-woff (pour Chrome au moins). x-woff corrigera les 404 de Chrome, x-font-woff corrigera les avertissements de Chrome.

A partir de 2017 : Les polices Woff sont désormais normalisées dans le cadre de l'initiative Spécification RFC8081 au type mime font/woff y font/woff2 .

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

Solution 2

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

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

Answer 2

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

Si vous obtenez cela, vous pouvez passer de

application/x-woff

à

application/x -font -woff

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

(testé sur Chrome 17)

Answer 3

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

Answer 4

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

Answer 5

Je l'ai résolu :

J'ai dû utiliser Méthode Mo'Bulletproofer