This page has been robot translated, sorry for typos if any. Original content here.

Stocker des polices Web en CDN

Хранение веб-шрифтов в CDN

Comme vous le savez, pour améliorer les performances, il est préférable de stocker la statique dans un CDN.

En particulier, les polices Web.

Malheureusement, les polices Web stockées dans les CDN par défaut ne fonctionneront pas dans Firefox et Internet Explorer - Des paramètres CORS seront nécessaires pour un affichage correct. Vous trouverez ci-dessous le code nécessaire.

Configuration Apache

Les paramètres doivent être au format .htaccess ou httpd.conf :

 <FilesMatch ". (Eot | ttf | otf | woff)">
  Ensemble d'en-têtes Access-Control-Allow-Origin "*"
 </ FilesMatch>	

Configuration de Nginx

Les paramètres doivent être dans nginx.conf :

 if ($ filename ~ * ^. *? \. (eot) | (ttf) | (woff) $) {
  add_header Access-Control-Allow-Origin *;
 }	

Access-Control-Allow-Origin configure CORS de sorte qu'il soit possible de recevoir des fichiers de polices à partir de n'importe quel domaine.

Vous pouvez également répertorier les domaines séparés par des virgules si vous souhaitez autoriser leur récupération à partir de domaines spécifiques.

Vous pouvez également répertorier les domaines séparés par des virgules si vous souhaitez autoriser leur récupération à partir de domaines spécifiques.

Comment vérifier

Pour vérifier les paramètres d'en-tête corrects, vous pouvez utiliser curl :

 $ curl -I https://some.cdn.otherdomain.net/media/fonts/somefont.ttf

Réponse:

 # Résultat
 HTTP / 1.1 200 OK
 Serveur: Apache
 Serveur X-Backend: developer1.webapp.scl3.mozilla.com
 Type de contenu: text / plain;  jeu de caractères = UTF-8
 Access-Control-Allow-Origin: *
 ETag: "4dece1737ba40"
 Dernière mise à jour: lun., 10 juin 2013 15:04:01 GMT
 X-Cache-Info: mise en cache
 Cache-Control: max-age = 604795
 Expire le: mercredi 19 juin 2013 16:22:58 GMT
 Date: mercredi 12 juin 2013 à 16:23:03 GMT
 Connexion: Keep-Alive	

Si vous voyez Access-Control-Allow-Origin dans la réponse: * - tout va bien.

La même stratégie est utilisée dans Bootstrap CDN, vous pouvez donc être sûr qu’elle est bonne.