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


422

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

quelle version avez-vous pour firefox et chrome? Gecko 1.9.2 (Firefox 3.6) ajoute la prise en charge de WOFF.
Sotiris

Essayez à nouveau de vous convertir en OTF en Woff. J'ai eu un problème similaire et l'analyse du fichier était corrompue. C'est un bon site pour convertir en différents types de polices. onlinefontconverter.com
stacksonstacksonstacks

Réponses:


722

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.

Types MIME IIS 6

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>

5
Notez que vous pouvez obtenir une erreur en Cannot add duplicate collection entry of type ‘mimeMap’ with unique key attribute ‘fileExtension’...raison d'un conflit avec le fichier applicationhost.config. Vous pouvez résoudre ce problème en ajoutant <remove fileExtension=".woff" />juste avant de spécifier le nouveau mimeMap dans votre fichier web.config, pour supprimer le faux doublon.
Pete

11
Le type MIME a été normalisé comme application/font-woff.
Fernando Correia

5
Cela a fait l'affaire! Si vous avez le même problème mais avec le fichier .woff2, ajoutez simplement un autre type MIME (ou config) avec cette extension
mapache

2
On dirait que la spécification a changé (encore). Vos conseils pour application/x-font-woffest maintenant hors de date, de la RFC 8081 le type MIME correct est maintenant font/woffet font/woff2. Voir la réponse mise à jour dans votre question liée
Liam

3
Cette solution n'a pas fonctionné pour moi. Ce qui m'a fait l'affaire: hotcakescommerce.zendesk.com/hc/en-us/articles/…
Kim Lage

53

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>

3
et votre balise mentionnée <staticContent>doit être à l'intérieur d'une <system.webServer>balise
S.Serpooshan

fonctionne parfaitement bien, rapports de Windows Server 2012 r2, ASP.Net MVC5.
Cromwell

44

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)


Où changez-vous cela? Dans le navigateur ou sur le serveur?
Jake Wilson

Comme expliqué dans la réponse ci-dessus, il doit s'agir du serveur. Cette solution est pour Windows Server avec IIS 6.
adriendenat

1
chrome se plaint toujours pour moi avec x-font-woff
Sonic Soul

Pour réitérer mon commentaire : On dirait que la spécification a changé (encore). Vos conseils pour application/x-font-woffest maintenant hors de date, de la RFC 8081 le type MIME correct est maintenant font/woffet font/woff2. Voir la réponse mise à jour dans votre question liée
Liam

15

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

Aller aux types MIME

Ajouter un type MIME

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


2
Notez que les réponses de lien uniquement sont déconseillées , les réponses SO devraient être le point final d'une recherche de solution (par rapport à une autre étape de références, qui ont tendance à devenir obsolète au fil du temps). Veuillez envisager d'ajouter un synopsis autonome ici, en conservant le lien comme référence.
kleopatra

@kleopatra - Mise à jour de la réponse avec détails et suppression du lien.
Dhanuka777

"Je pense que faire cette configuration au niveau du serveur serait mieux car elle s'applique à tous les sites Web." - ça dépend vraiment. Si vous avez affaire à un serveur d'entreprise, qui exécute éventuellement plusieurs applications internes, oui, vous avez raison. D'un autre côté, si vous exécutez un site Web public, qui est distribué sur plusieurs serveurs, la méthode web.config gagne en termes de "cohérence" (c'est-à-dire qu'elle sera là, vous ne pouvez pas oublier de la configurer sur un seul serveur).
Balázs

10

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>

8

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


1

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.


1

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 !


0

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.


0

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


0

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.


0

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.

entrez la description de l'image ici


-1

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


1
Pouvez-vous s'il vous plaît étendre votre réponse et fournir des détails sur la façon dont cela résout le problème.
talex

Je l'ai maintenant signalé à la réponse acceptée .
Liam

-1

Résolu:

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


Cela signifie-t-il que vous n'utilisez plus WOFF? Se pourrait-il que votre serveur Web ne soit pas correctement configuré pour servir les fichiers WOFF? Par exemple, voyez ceci: stackoverflow.com/questions/3594823/mime-type-for-woff-fonts/…
mercator

J'ai testé la police avec l'encodage avec d'autres machines. Affiche une erreur fine et aucune erreur 404.
dcp3450

Ça ne me laissera pas. L'encodage est trop long. C'est expliqué ici: paulirish.com/2010/font-face-gotchas
dcp3450

1
Le lien dans la réponse n'existe plus.
Munim Munna
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.