When serving web fonts such as WOFF, WOFF2, TTF, or EOT<\/strong> 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)<\/strong> policy.<\/p>\n\n\n\n Common browser errors include:<\/p>\n\n\n\n No ‘Access-Control-Allow-Origin’ header is present on the requested resource.<\/p>\n<\/blockquote>\n\n\n\n or<\/p>\n\n\n\n Access to font at ‘https:\/\/example.com\/font.woff2<\/a>‘ from origin ‘https:\/\/www.example.org<\/a>‘ has been blocked by CORS policy.<\/p>\n<\/blockquote>\n\n\n\n To resolve this issue, you must configure NGINX to send the appropriate Access-Control-Allow-Origin<\/strong> header for font files.<\/p>\n\n\n\n This guide explains how to enable CORS for fonts in NGINX and verify that the configuration is working correctly.<\/p>\n\n\n\n Before proceeding, ensure the following:<\/p>\n\n\n\n Helpful installation guides:<\/p>\n\n\n\n Open your NGINX virtual host configuration file.<\/p>\n\n\n\n Add the following location block inside the server configuration:<\/p>\n\n\n\n Configuration Explanation<\/strong><\/p>\n\n\n\n If you want to restrict access to a specific domain, replace Before reloading NGINX, validate the configuration syntax:<\/p>\n\n\n\n Expected output:<\/p>\n\n\n\n Apply the changes by restarting or reloading NGINX:<\/p>\n\n\n\n Or:<\/p>\n\n\n\n Use curl to confirm that the header is being sent:<\/p>\n\n\n\n Expected response:<\/p>\n\n\n\n You can also verify the response using your browser’s Developer Tools under the Network<\/strong> tab.<\/p>\n\n\n\n CORS header is not appearing<\/strong><\/p>\n\n\n\n Fonts still fail to load<\/strong><\/p>\n\n\n\n Using Cloudflare or CDN<\/strong><\/p>\n\n\n\n If your site uses a CDN such as Cloudflare, purge the cache after updating NGINX settings to ensure the new headers are served.<\/p>\n\n\n\n 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 Following the steps in this guide will help eliminate common font-loading issues and improve the overall user experience on your website.<\/p>\n\n\n\n 1. What is CORS?<\/strong><\/p>\n\n\n\n CORS (Cross-Origin Resource Sharing) is a browser security mechanism that controls how resources are shared between different domains, subdomains, or origins.<\/p>\n\n\n\n 2. Why do font files require CORS headers?<\/strong><\/p>\n\n\n\n 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.<\/p>\n\n\n\n 3. Is using For publicly accessible font files, using Read the guide: Adding Automatic .php Extension in NGINX<\/a><\/p>\n\n\n\n Read the guide: Fix CodeIgniter 404 Errors in NGINX<\/a><\/p>\n\n\n\n\n
\n
\n\n\n\nPrerequisites<\/h2>\n\n\n\n
\n
\n
\n\n\n\nEnable CORS for Font Files in NGINX<\/h2>\n\n\n\n
vi \/etc\/nginx\/sites-enabled\/default<\/pre>\n\n\n\n
location ~* \\.(eot|ttf|woff|woff2)$ {\n add_header Access-Control-Allow-Origin *;\n}<\/pre>\n\n\n\n\n
location ~*<\/code> performs a case-insensitive match.<\/li>\n\n\n\n\\.(eot|ttf|woff|woff2)$<\/code> targets common font file extensions.<\/li>\n\n\n\nAccess-Control-Allow-Origin *<\/code> allows font files to be accessed from any domain.<\/li>\n<\/ul>\n\n\n\n*<\/code> with the allowed origin:<\/p>\n\n\n\nlocation ~* \\.(eot|ttf|woff|woff2)$ {\n add_header Access-Control-Allow-Origin https:\/\/example.com;\n}<\/pre>\n\n\n\n
\n\n\n\nVerify NGINX Configuration<\/h2>\n\n\n\n
nginx -t<\/pre>\n\n\n\n
nginx: configuration file \/etc\/nginx\/nginx.conf test is successful<\/pre>\n\n\n\n
\n\n\n\nRestart NGINX<\/h2>\n\n\n\n
systemctl restart nginx<\/pre>\n\n\n\n
systemctl reload nginx<\/pre>\n\n\n\n
\n\n\n\nVerify CORS Headers<\/h2>\n\n\n\n
curl -I https:\/\/yourdomain.com\/fonts\/font.woff2<\/pre>\n\n\n\n
Access-Control-Allow-Origin: *<\/pre>\n\n\n\n
\n\n\n\nTroubleshooting<\/h2>\n\n\n\n
\n
nginx -t<\/code> to check for configuration errors.<\/li>\n\n\n\n\n
\n\n\n\nConclusion<\/h2>\n\n\n\n
Access-Control-Allow-Origin<\/code> header and validating the configuration, you can prevent browser CORS errors and ensure that web fonts load correctly for all users.<\/p>\n\n\n\n
\n\n\n\nFrequently Asked Questions (FAQ)<\/h2>\n\n\n\n
Access-Control-Allow-Origin *<\/code> safe?<\/strong><\/p>\n\n\n\n*<\/code> is generally acceptable. However, if you need stricter security, specify the exact domain that should be allowed to access the fonts.<\/p>\n\n\n\n
\n\n\n\nRelated Articles<\/h2>\n\n\n\n
1. Adding Automatic .php Extension in NGINX<\/h4>\n\n\n\n
2. Fix CodeIgniter 404 Errors in NGINX<\/h4>\n\n\n\n
3. Hide Web Server Information and Modify Server Headers in NGINX<\/h4>\n\n\n\n