StackPath Support

Using SecureCDN with Web Fonts

When using web fonts with @font-face or other CSS3 methods, browsers like Firefox and IE may refuse to embed the font when it’s coming from a third party URL. The browsers do this because they see the font as a security risk.

To solve this issue, a few lines need added to the web server.

Apache

Add these lines to the top of your .htaccess file:

​# ----------------------------------------------------------------------
# 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

  1. ​Log in to your Amazon account.
  2. Select the S3 Bucket.

  3. Click Edit CORS Configuration.

  4. 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>

Frequently Asked Questions

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 a CDN file by running curl -I http://site.company.stackpathdns.com/example-file.woff. If the output is missing the CORS header, purge the CDN cache. This should fix the problem.

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

A: Different code is needed for each web server. If you’re unsure of which web server you’re using, run curl -I http://origin.com/ and look for the server header. I should contain the name and version of your web server.

Return to top
Powered by Zendesk