How to use CDN with Webfonts

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. Adding a few lines in your .htaccess file will solve the problem permanently.

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

Recommended .htaccess configuration

# ----------------------------------------------------------------------
# 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|font.css)$">
    Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
</IfModule>

# ----------------------------------------------------------------------

# 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

# mod_headers, y u no match by Content-Type?!

SetEnvIf Origin ":" IS_CORS

Header set Access-Control-Allow-Origin "*" env=IS_CORS

</FilesMatch>

</IfModule>

# ----------------------------------------------------------------------

# Webfont access

# ----------------------------------------------------------------------

# Allow access from all domains for webfonts.

# Alternatively you could only whitelist your

# subdomains like "subdomain.example.com".

Header set Access-Control-Allow-Origin "*"

</FilesMatch>

</IfModule>

IIS ver 7.5+

<system.webserver>
   <httpprotocol>
     <customheaders>
       <add name="access-control-allow-origin" value="*" />
       <add name="access-control-allow-headers" value="content-type" />
     </customheaders>
    </httpprotocol>
 </system.webserver>

<system.webserver>

</customheaders>

</httpprotocol>

</system.webserver>

IIS ver < 7.5

<system.webserver>
   <httpprotocol>
     <customheaders>
       <add name="access-control-allow-origin" value="*" />
     </customheaders>
    </httpprotocol>
 </system.webserver>

<system.webserver>

</customheaders>

</httpprotocol>

</system.webserver>