Type MIME pour les polices WOFF?
Quel type de mime les polices WOFF doivent-elles être utilisées?
Je sers les polices TrueType (ttf) comme font/truetype et opentype (otf) comme font/opentype, mais je ne trouve pas le format correct pour les polices WOFF.
J'ai essayé font/woff, font/webopen et font/webopentype, mais Chrome se plaint toujours:
"Ressource interprétée comme une police mais transférée avec le type MIME application/octet-stream."
Quelqu'un sait?
Mise à jour de commentaire de Keith Shaw le 22 juin 2017:
En date de février 2017, RFC8081 est la norme proposée. Il définit un type de support de niveau supérieur pour les polices. Par conséquent, le type de support standard pour WOFF et WOFF2 est le suivant:
font/woff
font/woff2
En janvier 2011 il a été annoncé qu'entre-temps, Chromium reconnaîtra
application/x-font-woff
comme type mime pour WOFF. Je sais que ce changement est maintenant dans Chrome bêta et s'il n'est pas encore stable, il ne devrait pas être trop éloigné.
Pour moi, le suivant travaille dans un fichier .htaccess.
AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff
AddType font/woff2 .woff2
Ce sera application/font-woff.
voir http://www.w3.org/TR/WOFF/#appendix-b (Recommandation du candidat au W3C du 4 août 2011)
et http://www.w3.org/2002/06/registering-mediatype.html
À partir des notes font-face de Mozilla css
Dans Gecko, les polices Web sont soumises à la même restriction de domaine (les fichiers de police doivent figurer sur le même domaine que la page les utilisant), à moins que des contrôles d'accès HTTP ne soient utilisés pour assouplir cette restriction. Remarque: étant donné qu'il n'existe aucun type MIME défini pour les polices TrueType, OpenType et WOFF, le type MIME du fichier spécifié n'est pas pris en compte.
source: https://developer.mozilla.org/en/CSS/@font-face#Notes
Référence pour l'ajout de types mime de police à .NET/IIS
via web.config
<system.webServer>
<staticContent>
<!-- remove first in case they are defined in IIS already, which would cause a runtime error -->
<remove fileExtension=".woff" />
<remove fileExtension=".woff2" />
<mimeMap fileExtension=".woff" mimeType="font/woff" />
<mimeMap fileExtension=".woff2" mimeType="font/woff2" />
</staticContent>
</system.webServer>
via IIS Manager
NGINX SOLUTION
fichier
/etc/nginx/mime.types
ou
/usr/local/nginx/conf/mime.types
ajouter
font/ttf ttf;
font/opentype otf;
font/woff woff;
font/woff2 woff2;
application/vnd.ms-fontobject eot;
retirer
application/octet-stream eot;
RÉFÉRENCES
RFC @ 02.2017
https://tools.ietf.org/html/rfc8081#page-15
https://www.iana.org/assignments/media-types/media-types.xhtml
Merci à Mike Fulcher
En date de février 2017, RFC8081 est la norme proposée. Il définit un type de support de niveau supérieur pour les polices. Par conséquent, le type de support standard pour WOFF et WOFF2 est le suivant:
font/woff
font/woff2
Il n'y a pas de type font MIME! Ainsi, font/xxx est TOUJOURS faux.
La chose qui l’a fait pour moi a été d’ajouter ceci à mon initialiseur mime_types.rb:
Rack::Mime::MIME_TYPES['.woff'] = 'font/woff'
et effacez le cache
rake tmp:cache:clear
avant de redémarrer le serveur.
Source: https://github.com/sstephenson/sprockets/issues/366#issuecomment-9085509
Ajoutez ce qui suit à votre .htaccess
AddType font/woff woff
bonne chance
@ Nico ,
Actuellement, il n'existe pas de norme définie pour le type mime de la police woff. J'utilise un service cdn de livraison de polices et il utilise font/woff et je reçois le même avertissement en chrome.
Référence: Autorité des numéros attribués à Internet
Cela aidera peut-être quelqu'un. J'ai vu que sur IIS 7 .ttf est déjà un type mime connu. Il est configuré comme:
application/octet-stream
Je viens donc d'ajouter que pour tous les types de polices CSS (.oet, .svg, .ttf, .woff) et IIS ont commencé à les servir. Chrome _ Les outils de développement ne se plaignent pas non plus de la réinterprétation du type.
A bientôt Michael
Je sais que cet article est un peu vieux, mais après avoir passé de nombreuses heures à essayer de faire fonctionner les polices sur ma machine locale nginx et à essayer des tonnes de solutions, j'ai finalement obtenu celle qui fonctionnait comme un charme.
location ~* \.(eot|otf|ttf|woff|woff2)$ {
add_header Access-Control-Allow-Origin *;
}
À l'intérieur de la parenthèse, vous pouvez insérer les extensions de vos polices ou généralement les fichiers que vous souhaitez charger. Par exemple, je l'ai utilisé pour les polices de caractères et pour les images (png, jpg, etc.), de sorte que vous ne devez pas vous tromper, cette solution ne s'applique que pour les polices de caractères.
Il suffit de le mettre dans votre fichier de configuration nginx, de le redémarrer et j’espère que cela fonctionnera aussi pour vous!
Pour toute solution index.php, supprimez l’URL du formulaire et le fichier woff autorisés. Pour écrire ci-dessous le code dans le fichier .htaccess et effectuez cette substitution dans votre fichier application/config/config.php: $ config ['index_page'] = '';
Pour le serveur d’hébergement Linux uniquement.Détails du fichier .htaccess
AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
#Removes access to the system folder by users.
#Additionally this will allow you to create a System.php controller,
#previously this would not have been possible.
#'system' can be replaced if you have renamed your system folder.
RewriteCond %{REQUEST_URI} ^system.*
RewriteRule ^(.*)$ /index.php?/$1 [L]
#When your application folder isn't in the system folder
#This snippet prevents user access to the application folder
#Submitted by: Fabdrol
#Rename 'application' to your applications folder name.
RewriteCond %{REQUEST_URI} ^application.*
RewriteRule ^(.*)$ /index.php?/$1 [L]
#Checks to see if the user is attempting to access a valid file,
#such as an image or css document, if this isn't true it sends the
#request to index.php
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php?/$1 [L]
</IfModule>
<IfModule !mod_rewrite.c>
# If we don't have mod_rewrite installed, all 404's
# can be sent to index.php, and everything works as normal.
# Submitted by: ElliotHaughin
ErrorDocument 404 /index.php
</IfModule>
Ceci est une liste utile de mimétypes
IIS a automatiquement défini .ttf en tant qu'application/octet-stream, ce qui semble fonctionner correctement et fontshop recommande que .woff soit défini en tant qu'application/octet-stream
WOFF:
- Format de police ouvert sur le Web
- Il peut être compilé avec des contours TrueType ou PostScript (CFF)
- Il est actuellement pris en charge par FireFox 3.6+
Essayez d'ajouter que:
AddType application/vnd.ms-fontobject .eot
AddType application/octet-stream .otf .ttf
Le type MIME pourrait ne pas être votre seul problème. Si le fichier de police est hébergé sur S3 ou un autre domaine, vous pouvez également avoir comme problème que Firefox ne chargera pas de polices de domaines différents. C'est une solution facile avec Apache, mais dans Nginx, j'ai lu qu'il pourrait être nécessaire de coder vos fichiers de polices en base 64 et de les intégrer directement dans votre fichier css de polices.
J'ai eu le même problème, font/opentype a fonctionné pour moi