Pourquoi @ font-face génère-t-il une erreur 404 dans les fichiers woff?
J'utilise @font-face sur le site de mon entreprise et cela fonctionne/est superbe. Sauf Firefox et Chrome générera une erreur 404 sur le fichier .woff. IE ne génère pas l'erreur. Les polices se trouvent à la racine, mais j’ai essayé d’utiliser les polices du dossier css et même de donner l’URL complète de la police. Si vous supprimez ces polices de mon fichier CSS, je ne reçois pas de code 404, je sais donc que ce n'est pas une erreur de syntaxe.
De plus, j'ai utilisé l'outil fontsquirrels pour créer les polices et le code @font-face:
@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;
}
J'éprouvais le même problè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 y remédier en procédant comme suit:
Solution 1
"Ajoutez simplement les déclarations de type MIME suivantes via IIS Manager (onglet En-têtes HTTP des propriétés du site Web): application .woff/x-woff"
Mise à jour: selon types MIME pour les polices woff et Grsmto le type MIME actuel est application/x-font-woff (pour Chrome au moins). x-woff corrigera Chrome 404s, x-font-woff corrigera Chrome avertissements.
À 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.
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 à cet article a été très utile et a permis de gagner beaucoup de temps. Cependant, j'ai constaté qu'en utilisant FontAwesome 4.50, je devais ajouter une configuration supplémentaire pour le type d'extension woff2 comme indiqué ci-dessous. Les demandes de type woff2 donnaient une erreur 404 dans le développeur de Chrome. Outils sous Console> Erreurs.
Selon le commentaire de S.Serp, la configuration ci-dessous devrait ê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>
En fait, la réponse @Ian Robinson fonctionne bien, mais Chrome continuera à se plaindre du message suivant: "La ressource est interprétée comme une police mais transférée avec le type MIME application/x-woff"
Si vous obtenez cela, vous pouvez changer de
application/x-woff
à
application/x-Police de caractère-woff
et vous n'aurez plus aucune erreur de console Chrome!
(testé sur Chrome 17)
Solution pour IIS7
J'ai aussi rencontré le même problème. Je pense que cette configuration à partir du niveau du serveur serait préférable car elle s’applique à tous les sites Web.
Allez sur le noeud IIS et double-cliquez sur l'option de configuration "Types MIME".
Cliquez sur le lien "Ajouter" dans le panneau Actions en haut à droite.
Cela fera apparaître un dialogue. Ajoutez une 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 de Ian, je devais autoriser les extensions de police du module de filtrage des demandes à le faire fonctionner.
<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écuter IIS Gestionnaire de serveur (commande d'exécution: inetmgr) Ouvrez les types MIME et ajoutez les éléments suivants.
Extension du nom de fichier: .woff
type MIME: application/octet-stream
J'ai essayé une tonne de choses sur les autorisations, les types MIME, etc., mais pour moi, c'est que web.config a supprimé le gestionnaire de fichiers statiques dans IIS, puis l'a ajouté explicitement dans les répertoires contenant 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é d'obtenir 404.
Si vous utilisez CodeIgniter sous IIS7:
Dans votre fichier web.config, ajoutez woff au motif
<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 ça aide !
Si vous n'avez pas accès à la configuration de votre serveur Web, vous pouvez également simplement RENOMMER le fichier de police afin qu'il se termine par svg (tout en conservant le format). Fonctionne bien pour moi dans Chrome et Firefox.
Cela peut sembler évident, mais cela m’a fait trébucher plusieurs fois avec 404 ... Assurez-vous que les autorisations du dossier des polices sont définies correctement.
Résolu:
Je devais utiliser méthode Mo'Bulletproofer
Vérifiez également votre enregistreur d'URL. Il peut en jeter 404 si quelque chose de "bizarre" a été trouvé.
Si cela ne fonctionne toujours pas après avoir ajouté des types MIME, vérifiez si "Authentification anonyme" est activé dans la section Authentification du site et assurez-vous de sélectionner "Identité du pool d'applications" conformément à la capture d'écran donnée.
