Difference between revisions of "How to use CDN with Webfonts with Magento"

Latest revision as of 21:42, 5 October 2018

How to use CDN with Webfonts with Magento

Enabled a CDN on your Magento store and your Fonts and CORs-enabled images not working correctly.

When using Webfonts via @font-face or other CSS3 methods, some browsers like Firefox and IE will refuse to embed the font when it’s coming from a 3rd party URL because it’s a security risk. The solution is very simple, just add a few lines in your .htaccess file to permanently solve the problem.

Solution

Please add these lines to your .htaccess, preferably at the top:

Apache

# ----------------------------------------------------------------------
# CORS-enabled images (@crossorigin)
# ----------------------------------------------------------------------
# Send CORS headers if browsers request them; enabled by default for images.
# developer.mozilla.org/en/CORS_Enabled_Image
# blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html
# hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/
# wiki.mozilla.org/Security/Reviews/crossoriginAttribute
<IfModule mod_setenvif.c>
 <IfModule mod_headers.c>
   # mod_headers, y u no match by Content-Type?!
   <FilesMatch "\.(gif|png|jpe?g|svg|svgz|ico|webp)$">
     SetEnvIf Origin ":" IS_CORS
     Header set Access-Control-Allow-Origin "*" env=IS_CORS
   </FilesMatch>
 </IfModule>
</IfModule>
# ----------------------------------------------------------------------
# Webfont access
# ----------------------------------------------------------------------
# Allow access from all domains for webfonts.
# Alternatively you could only whitelist your
# subdomains like "subdomain.example.com".
<IfModule mod_headers.c>
   <FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css|js|html|json)">
   Header set Access-Control-Allow-Origin "*"
   Header set Access-Control-Allow-Headers "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With"
   Header set Access-Control-Allow-Methods "POST, GET, OPTIONS"
  </FilesMatch>
</IfModule>

Nginx

location ~ \.(ttf|ttc|otf|eot|woff|font.css|css)$ {
          add_header Access-Control-Allow-Origin "*";
}

After making those adjustments you will want to flush the CDN so that it picks up the new headers on the files with the Access-Control-Allow-Origin "*"

Testing the Headers

Once you have added the above code to your .htaccess / configuration file you can test to verify the cdn has picked up the new headers.

curl -I http://<CDNforyourdomain>/path/to/object/

You should see the follwoing in the headers:

Access-Control-Allow-Origin "*"

If you do not see that you will need to flush that object from the CDN so that it will pick up the new headers on the file.