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.

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

# ----------------------------------------------------------------------
# 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
# ----------------------------------------------------------------------
# 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)$">
    Header set Access-Control-Allow-Origin "*"

IIS ver 7.5+

       <add name="access-control-allow-origin" value="*" />
       <add name="access-control-allow-headers" value="content-type" />

IIS ver < 7.5

       <add name="access-control-allow-origin" value="*" />


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

S3 Bucket

  • Login to your Amazon account.
  • Choose your S3 Bucket
  • Click on Edit CORS Configuration
  • Add following code and save all settings:


Q: I have added the code but, issue persists. Why?

A: If you run curl -I http://origin.com/example-file.woff and confirm there is CORS header properly added, do the same with CDN file by using curl -I http://cdn.domain.com/example-file.woff. This would be the point where you can find the cause of the issue, it would be, most likely, missing CORS header and all you need to do is purge CDN cache.

Q: I am not familiar with system administration. What is appropriate code for me?

A: Depending on your Webserver you’d be using different code. If you are not certain which Webserver you are using you can check with your hosting support or you can simply run curl -I http://origin.com/ and look for Server header, it’ll most likely contain the name and version of your Webserver.

  • Mary Smith

    Does it work with any CDN? I tried to apply it for http://cdnsun.com/ , but my browser shows an error. Is it a mistake in the line?

    • Ivan Dabic

      HI Mary,

      This method is the same for any CDN and for any other external location you are pulling assets from. If you see an err, it’s most likely the typo or conflict with the rest of your htaccess code. I suggest you start debugging from error description you’ve got.

      • Issam

        Hi Ivan, i home you’ll see this request 🙂
        i want to ask about the .htaccess file, this one that should be updated, is it the htaccess in cdn server or that one in my web Server
        cdn Server doesn’t allow access to such file!

        • Ivan Dabić

          Hi there,

          That would be hosting htaccess file. There is not one on CDN side


        • Thanks for sharinG!

      • Depending on your Webserver you’d be using different code. If you are not certain which Webserver you are using you can check with your hosting support or you can simply run curl -I http://origin.com/ and look for Server header, it’ll most likely contain the name and version of your Webserver

        • Q: I am not familiar with system administration. What is appropriate code for me?

  • Franklin Hatchett

    What bits do I add? just the bots in red and black?

    • Ivan Dabic

      Hey Franklin,
      Yes, however, you can use entire snippet(s) because the not needed parts are commented out anyhow. Therefore, when you use entire snippet for, let say, htaccess, only actual codes are being applied so you don’t have to worry about which parts should be used – use entire thing and you are good to go 🙂

      • Franklin Hatchett

        Thank for this I’ve been having issues with google fonts loading up, this has fixed in on firefox and chrome, now to figure out why my fonts are still slow at loading on dafari haha

  • Hi, does the .htaccess code go on the main server or the server where the ajax request is sent?. It seems we cannot access .htaccess file on MaxCDN

    • Ivan Dabic

      Hi Nadir,

      this code goes into htaccess file that resides on your origin server that is serving files TO maxcdn. Meaning, server that is feeding us with webfonts should have above code used in htaccess (or other config files in case that your origin server doesn’t support htaccess – IIS,nginx,…).

  • Terry Zielke

    I am trying to add the nginx code to the nginx.conf file but it is giving me an error “nginx: [emerg] invalid number of arguments in “add_header” directive in /etc/nginx/nginx.conf:53″ any ideas how to fix this?

    • Ivan Dabic

      Hey Terry,
      Judging by the error it says your add_header directive might have extra argument made by accidental space or concatenated value with header name. I’d also like if you could send us the code you have on support@maxcdn.com so we can investigate and get back to you.

  • Buetto

    Thanks for help!

  • The above code didn’t help me. But this one did (apache) –

    Header set Access-Control-Allow-Origin “*”

  • Is there no way to tell each zone what files types not to cache from within MaxCDN zone settings?

  • Matija

    Again, a great article. Googe web fonts are handeled by plugin wp rocket, so that part I have covered.
    There is another plugin which adds very nice combinations of ”lines” for other webfonts.
    Its WP Super Simple Speed plugin. I do not use it where I use wp-rocket or similar caching plugins, but this plugin on itself is giving a lot of speed to your website, including font optimizations.
    Check it out https://bs.wordpress.org/plugins/wp-super-simple-speed/

    I think that it adds the code which Nitish Saxena mentioned.

  • Michael Owens

    Are there any security concerns when adding this to the web.config ???

    • Ivan Dabic

      Hey Michael,

      Well, normally you would be defining any domain as applicable from loading cross domain shared content protected by this policy. However, if you are concerned about potential weaknesses on your website I’d say add only the domain you trust (origin) instead of “*”.
      Feel free to write to us on support@maxcdn.com if you should have any other concerns.

  • Core-Gaming

    Hello Ivan.
    I’m desperate for a working solution but no matter what I try it just doesn’t work.
    I’m using Cloudflare and 000webhost.
    I tried applying the new htaccess with the rules specified in your post, yet when access the font file directly – the header is set to *, while accessing the main site where the fonts are supposed to be rendered, the CORS are missing so it doesn’t render it.
    I checked that the host has mod_headers enabled and it is, so I can’t understand why the header is not received when pulling the assets.
    I even tried to pull all font files and css through a php script (called rsrc.php, just like Facebook do) and force the header to be sent but this didn’t work as well..
    It’s pretty much frustrating trying so many methods yet all fail, I’ve been trying to implement solutions for this for the past 18 hours..


    • Core-Gaming

      Nevermind, I was told by the support staff a few moments ago, that they “do not support this feature at the moment”, which is odd because Apache does load mod_headers [used phpinfp() to check] and still doesn’t work, perhaps they blocked it in the server level (perhaps the engine itself) to not parse and process this header.

  • “500 Internal Serer Error” u.u

  • InstallationComplete

    Hello – This solution for Nginx works great for Safari and Firefox… but not for Chrome. From my understanding, Chrome wants an exact match of Origin, so wildcards don’t work.

    Can you suggest a better alternative to handle CORS for Chrome?