In merito alla CDN e ai @fontface, una problematica è legata al fatto che firefox e internet explorer interpretano in modo restrittivo le policy di "Same Origin Restiction" ai font ( http://dev.w3.org/csswg/css3-fonts/#same-origin-restriction ) , per questioni di sicurezza quindi il font non verrà visualizzato.
Per poterlo visualizzare correttamente occorre inviare un'header indicando da quali origini viene permesso l'accesso:
Questa tecnica si chiama CORS (Cross-Origin Request Sharing).
Nel file .htaccess:
# Apache config x fonts <FilesMatch "\.(ttf|ttc|otf|eot|woff|svg|font-awesome.css|styleshett.css)">Header set Access-Control-Allow-Origin "*" </FilesMatch> AddType application/vnd.ms-fontobject .eot AddType font/ttf .ttf AddType font/otf .otf AddType application/x-font-woff woff AddType image/svg+xml .svg # Compress compressible fonts AddOutputFilterByType DEFLATE font/ttf font/otf image/svg+xml # Add a far future Expires header for fonts ExpiresByType application/vnd.ms-fontobject "access plus 1 year" ExpiresByType font/ttf "access plus 1 year" ExpiresByType font/otf "access plus 1 year" ExpiresByType font/x-woff "access plus 1 year" ExpiresByType image/svg+xml "access plus 1 year"
Per permettere ai font di essere forniti da amazon s3 bisogna:
- Andare alla console di AWS.
- Scegliere il bucket.
- Andare in Properties.
- Scegliere Edit CORS Configuration.