When using web fonts with @font-face or other CSS3 methods, browsers like Firefox and Internet Explorer may refuse to embed the font when it’s coming from a third party URL because they perceive the font as a security risk.
The recommended way to add it is via the CDN itself. This can be done via the Settings tab of the CDN configuration in your Stackpath Portal.
It can take a few moments for settings to propagate on your website after being enabled.
The other way to solve this issue would be on your server itself, by adding a few lines of code.
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
- Log in to your Amazon account.
-
Select the S3 Bucket.
-
Click Edit CORS Configuration.
-
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.