J'utilise @font-facesur le site de mon entreprise et cela fonctionne / a fière allure. Sauf que Firefox et Chrome lèveront une erreur 404 sur le .wofffichier. IE ne renvoie pas l'erreur. J'ai les polices situées à la racine mais j'ai essayé avec les polices dans le dossier css et même en donnant l'url entière pour la police. Si je supprime ces polices de mon fichier css, je n'obtiens pas de 404, donc je sais que ce n'est pas une erreur de syntaxe.

En outre, j'ai utilisé l'outil fontsquirrels pour créer les @font-facepolices 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;
}

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

Si vous êtes dans la même situation, vous pouvez le corriger en procédant comme suit:

Solution 1

"Ajoutez simplement les déclarations de type MIME suivantes via le Gestionnaire IIS (onglet En-têtes HTTP des propriétés du site Web): application .woff / x-woff "

Mise à jour: selon les types MIME pour les polices woff et Grsmto, le type MIME réel est application / x-font-woff (pour Chrome au moins). x-woff corrigera Chrome 404s, x-font-woff corrigera les avertissements Chrome.

Depuis 2017 : les polices Woff sont désormais standardisées dans le cadre de la spécification RFC8081 pour le type MIMEfont/woff et font/woff2.

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

Solution 2

Vous pouvez également ajouter les types MIME dans la 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>

La réponse à ce message a été très utile et a permis de gagner beaucoup de temps. Cependant, j'ai constaté que lors de l'utilisation FontAwesome 4.50, je devais ajouter une configuration supplémentaire pour le woff2type d'extension également comme indiqué ci-dessous, sinon les demandes de woff2type donnaient une erreur 404 dans les outils de développement de Chrome sous Console> Erreurs.

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

<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>

En fait, la réponse @Ian Robinson fonctionne bien, mais Chrome continuera de se plaindre de ce message: " Ressource interprétée comme police mais transférée avec une 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 aucune erreur de console Chrome!

(testé sur Chrome 17)

Solution pour IIS7

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

1. Accédez au nœud racine IIS et double-cliquez sur l'option de configuration "Types MIME"

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

3. Cela fera apparaître une boîte de dialogue. Ajoutez l'extension de fichier .woff et spécifiez "application / x-font-woff" comme type MIME correspondant.

Ajouter un type MIME pour l'extension de nom de fichier .woff

Voici ce que j'ai fait pour résoudre le problème dans IIS 7

En plus de la réponse d'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>

Exécutez IIS Server Manager (exécutez la commande: inetmgr) Ouvrez les types MIME et ajoutez les éléments suivants

Extension de nom de fichier: .woff

Type MIME : application / octet-stream

J'ai essayé une tonne de choses autour des autorisations, des types MIME, etc., mais pour moi, cela a fini par être que le web.config avait supprimé le gestionnaire de fichiers statiques dans IIS, puis l'ajouté explicitement pour les répertoires qui auraient des fichiers statiques. Dès que j'ai ajouté un nœud d'emplacement pour mon répertoire et ajouté le gestionnaire, les demandes ont cessé de recevoir 404.

Si vous utilisez CodeIgniter sous IIS7:

Dans votre fichier web.config, ajoutez woff au modèle

<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>

J'espère que cela aide !

Cela peut être évident, mais cela m'a fait trébucher à plusieurs reprises avec 404 ... Assurez-vous que les autorisations de dossier de polices sont correctement définies.

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

Si vous n'avez pas accès à votre configuration de serveur Web, vous pouvez également RENOMMER le fichier de police pour qu'il se termine en svg (mais conserver le format). Fonctionne bien pour moi dans Chrome et Firefox.

Si cela ne fonctionne toujours pas après l'ajout de types MIME, veuillez vérifier si «Authentification anonyme» est activée dans la section Authentification du site et assurez-vous de sélectionner «Identité du pool d'applications» selon la capture d'écran donnée.

Type MIME IIS: police .woff / x-woff (pas application / x-woff ou application / x-font-woff)

Résolu:

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