Introduction
When serving web fonts such as WOFF, WOFF2, TTF, or EOT from an NGINX web server, browsers may block access if the font files are requested from a different domain, subdomain, or CDN. This restriction is enforced by the browser’s Cross-Origin Resource Sharing (CORS) policy.
Common browser errors include:
No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
or
Access to font at ‘https://example.com/font.woff2‘ from origin ‘https://www.example.org‘ has been blocked by CORS policy.
To resolve this issue, you must configure NGINX to send the appropriate Access-Control-Allow-Origin header for font files.
This guide explains how to enable CORS for fonts in NGINX and verify that the configuration is working correctly.
Prerequisites
Before proceeding, ensure the following:
- NGINX web server is installed and running.
- You have root or sudo access to the server.
- Font files are being served by NGINX.
Helpful installation guides:
- Ubuntu 16.04 – Install NGINX, PHP, and MariaDB
- CentOS 7 – Install NGINX, PHP-FPM, and MariaDB
Enable CORS for Font Files in NGINX
Open your NGINX virtual host configuration file.
vi /etc/nginx/sites-enabled/default
Add the following location block inside the server configuration:
location ~* \.(eot|ttf|woff|woff2)$ {
add_header Access-Control-Allow-Origin *;
}
Configuration Explanation
location ~*performs a case-insensitive match.\.(eot|ttf|woff|woff2)$targets common font file extensions.Access-Control-Allow-Origin *allows font files to be accessed from any domain.
If you want to restrict access to a specific domain, replace * with the allowed origin:
location ~* \.(eot|ttf|woff|woff2)$ {
add_header Access-Control-Allow-Origin https://example.com;
}
Verify NGINX Configuration
Before reloading NGINX, validate the configuration syntax:
nginx -t
Expected output:
nginx: configuration file /etc/nginx/nginx.conf test is successful
Restart NGINX
Apply the changes by restarting or reloading NGINX:
systemctl restart nginx
Or:
systemctl reload nginx
Verify CORS Headers
Use curl to confirm that the header is being sent:
curl -I https://yourdomain.com/fonts/font.woff2
Expected response:
Access-Control-Allow-Origin: *
You can also verify the response using your browser’s Developer Tools under the Network tab.
Troubleshooting
CORS header is not appearing
- Verify the location block is inside the correct server block.
- Run
nginx -tto check for configuration errors. - Reload NGINX after making changes.
- Clear browser cache and CDN cache if applicable.
Fonts still fail to load
- Confirm the font files are being served by NGINX.
- Check browser developer console for additional errors.
- Verify there are no conflicting location blocks overriding the configuration.
Using Cloudflare or CDN
If your site uses a CDN such as Cloudflare, purge the cache after updating NGINX settings to ensure the new headers are served.
Conclusion
Configuring CORS headers for font files in NGINX is a simple but essential step when serving fonts across domains, subdomains, or CDNs. By adding the Access-Control-Allow-Origin header and validating the configuration, you can prevent browser CORS errors and ensure that web fonts load correctly for all users.
Following the steps in this guide will help eliminate common font-loading issues and improve the overall user experience on your website.
Frequently Asked Questions (FAQ)
1. What is CORS?
CORS (Cross-Origin Resource Sharing) is a browser security mechanism that controls how resources are shared between different domains, subdomains, or origins.
2. Why do font files require CORS headers?
Modern browsers enforce CORS checks on font files. If the font is loaded from a different origin and the required header is missing, the browser blocks access.
3. Is using Access-Control-Allow-Origin * safe?
For publicly accessible font files, using * is generally acceptable. However, if you need stricter security, specify the exact domain that should be allowed to access the fonts.
Related Articles
1. Adding Automatic .php Extension in NGINX
Read the guide: Adding Automatic .php Extension in NGINX
2. Fix CodeIgniter 404 Errors in NGINX
Read the guide: Fix CodeIgniter 404 Errors in NGINX
3. Hide Web Server Information and Modify Server Headers in NGINX
Read the guide: Hide Web Server Information and Modify Server Headers in NGINX
Talk to our experts
Looking for the right technology solution for your business? Our team of experts can help you with development, cloud, DevOps, design, and a wide range of other technology needs. Get in touch with our team here.