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

j'utilise @font-face sur le site de mon entreprise et il fonctionne/semble grand. Sauf que Firefox et Chrome vont lancer une erreur 404 sur le fichier .woff . 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 supprimez ces polices de mon fichier css, Je ne reçois pas de 404, donc je sais que ce n'est pas une erreur de syntaxe.

aussi, j'ai utilisé l'outil fontsquirrels 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;
}
399
demandé sur Mosh Feu 2010-10-25 18:56:42

14 réponses

j'éprouvais ce 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 êtes dans la même situation, vous pouvez la corriger en faisant ce qui suit:

Solution 1

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

mise à Jour: selon Types MIME pour woff polices et Grsmto le type MIME est application/x-font-woff (pour Chrome au moins). x-woff corrigera Chrome 404s, x-font-woff corrigera les Avertissements Chrome.

à partir de 2017 : les polices Woff ont été normalisées dans le cadre de la spécification RFC8081 au type mime font/woff et font/woff2 .

IIS 6 MIME Types

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

Solution 2

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="font/woff" />
    </staticContent>    
  </system.webServer>
699
répondu Ian Robinson 2018-06-15 08:29:43

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

si vous obtenez cela, vous pouvez changer de

application / x-woff

à

application/x - "police de la 1519150920" -woff

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

(testé sur Chrome 17)

44
répondu Grsmto 2012-02-28 14:58:58

la réponse à ce message a été très utile et un grand épargnant. Cependant, j'ai découvert que lorsque j'utilisais FontAwesome 4.50 , j'ai dû ajouter une configuration supplémentaire pour le type d'extension woff2 , comme indiqué ci-dessous.les requêtes pour le type woff2 donnaient une erreur 404 dans les outils de développement de Chrome sous les erreurs Console>.

selon le commentaire de S. Serp, la configuration ci-dessous doit être placée dans la balise <system.webServer> . 

<staticContent>
  <remove fileExtension=".woff" />
  <!-- In case IIS already has this mime type -->
  <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
  <remove fileExtension=".woff2" />
  <!-- In case IIS already has this mime type -->
  <mimeMap fileExtension=".woff2" mimeType="application/x-font-woff2" />
</staticContent>
43
répondu Sunil 2017-10-01 17:46:26

Solution pour IIS7

"

j'ai également rencontré le même problème. Je pense faire cette configuration au niveau du serveur serait mieux car elle s'applique pour tous les sites.

  1. allez à IIS root node et double-cliquez sur les " types MIME" option de configuration

  2. cliquez sur "Ajouter" lien dans le panneau Actions en haut à droite.

  3. cela ouvrira un dialogue. Ajouter. extension de fichier woff et spécifier "application / x-font-woff" comme type MIME correspondant.

ajouter le type MIME pour .woff nom du fichier extension

Go to MIME Types

Add MIME Type

voici ce que j'ai fait pour résoudre la question en litige dans L'affaire 151930920"

13
répondu Dhanuka777 2016-03-31 02:25:10

Exécuter le Gestionnaire des services internet (commande exécuter : inetmgr) Ouvrir les types Mime et ajouter

extension de nom de fichier: .woff

type MIME : application / octet-stream

8
répondu Thunder 2014-11-11 08:39:36

en plus de la réponse de Ian, j'ai dû autoriser les extensions de police dans le module de filtrage des demandes pour que cela fonctionne. 

<system.webServer>
  <staticContent>
    <remove fileExtension=".woff" />
    <remove fileExtension=".woff2" />
    <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
    <mimeMap fileExtension=".woff2" mimeType="application/x-font-woff" />
  </staticContent>
  <security>
      <requestFiltering>
          <fileExtensions>
              <add fileExtension=".woff" allowed="true" />
              <add fileExtension=".ttf" allowed="true" />
              <add fileExtension=".woff2" allowed="true" />
          </fileExtensions>
      </requestFiltering>
  </security>    
</system.webServer>
8
répondu martinoss 2015-12-02 09:16:10

j'ai essayé une tonne de choses autour des permissions, types mime, etc, mais pour moi il a fini par être que le web.config avait supprimé le gestionnaire de fichiers statique dans IIS, puis l'avait explicitement ajouté pour les répertoires qui auraient des fichiers statiques. Dès que j'ai ajouté un noeud de localisation pour mon répertoire et que j'ai de nouveau ajouté le Gestionnaire, les requêtes ont cessé de recevoir les 404s.

1
répondu Matt 2014-11-11 15:36:44

si vous utilisez CodeIgniter sous IIS7:

dans votre web.fichier de configuration, ajouter woff au pattern 

<rule name="Rewrite CI Index">
  <match url=".*" />
    <conditions>
      <add input="{REQUEST_FILENAME}" pattern="css|js|jpg|jpeg|png|gif|ico|htm|html|woff" negate="true" />
    </conditions>
    <action type="Rewrite" url="index.php/{R:0}" />
 </rule>

Espère que cela aide !

1
répondu IvanJijon 2018-06-14 11:13:06

résolu:

j'ai dû utiliser Mo'Bulletproofer méthode

0
répondu dcp3450 2010-10-25 15:27:44

c'est peut-être évident, mais ça m'a fait trébucher avec des 404 à plusieurs reprises... Assurez-vous que le dossier polices autorisations sont définies correctement.

0
répondu Ecksley 2011-11-19 18:24:25

également vérifier votre URL rewriter. Il peut jeter 404 si quelque chose de "bizarre" a été trouvé.

0
répondu Dmitriy Romanov 2013-04-29 16:13:17

si vous n'avez pas accès à votre configuration de serveur web, vous pouvez aussi simplement renommer le fichier de police pour qu'il se termine en svg (mais conserver le format). Ça marche très bien pour moi dans Chrome et Firefox.

0
répondu Phil McCarty 2015-02-19 11:30:38

si cela ne fonctionne toujours pas après l'ajout des types MIME, veuillez vérifier si" Anonymous Authentication "est activée dans la section Authentification du site et assurez-vous de sélectionner" Application pool identity " selon la capture d'écran donnée.

enter image description here

0
répondu Thinira 2017-05-09 11:05:48

IIS Mime Type:.woff police/x-woff (pas d'application/x-woff, ou de l'application/x-font-woff)

-1
répondu dhaworth 2015-06-05 13:33:36