How to use CDN with Webfonts

This guide will walk you through how to use implement Webfonts on your site through your MaxCDN.

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
    </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)$">
    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>

IIS ver < 7.5

 <system.webServer>      
   <httpProtocol>
     <customHeaders>
       <add name="access-control-allow-origin" value="*" />
     </customHeaders>
    </httpProtocol>
</system.webServer>

NginX

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

S3 Bucket

• Log in to your Amazon account.
• Choose your S3 Bucket
• Click on Edit CORS Configuration

1. Add the following code and save all settings:

   <CORSConfiguration>
    <CORSRule>
      <AllowedOrigin>http://www.example1.com</AllowedOrigin>
   
      <AllowedMethod>PUT</AllowedMethod>
      <AllowedMethod>POST</AllowedMethod>
      <AllowedMethod>DELETE</AllowedMethod>
   
      <AllowedHeader>*</AllowedHeader>
    </CORSRule>
   </CORSConfiguration>
   

   

Q & A

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

A: If you run curl -I http://origin.com/example-file.woff and confirm there is a 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 the 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.

As always, If you have any questions or concerns about any of the topics mentioned in this article, please feel free to reach out to support - we are available 24/7 by chat or email.