How to Fix CORS Errors for Font Files

You have set the CDN and you have a problem with the fonts, here is the solution.

Font CORS errors happen when your site and your CDN are on different domains — the browser blocks cross-origin font loading unless the CDN explicitly allows it. This is a very common CDN misconfiguration.

Apache

Add this block to the .htaccess file and the htaccess.conf file at the very beginning

<FilesMatch "\.(eot|otf|ttf|woff|woff2)$">
   Header set Access-Control-Allow-Origin "*"
</FilesMatch>

Using * allows any domain to use the fonts. For tighter security, replace * with your specific domain, for example Access-Control-Allow-Origin "https://yourdomain.com". This ensures only your website can load the fonts, preventing hotlinking by other sites.

Nginx

Add this block to the virtual host file and restart Nginx:

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

For stricter security, replace * with your specific origin: add_header Access-Control-Allow-Origin "https://yourdomain.com";.

Cloudflare

If you use Cloudflare, CORS headers can be set via Page Rules or Transform Rules without editing your server configuration. Create a Transform Rule that adds the Access-Control-Allow-Origin header for font file extensions, giving you a code-free way to fix CORS across your entire zone. Invalidating the files saved on the CDN is still necessary so that the new headers are picked up by visitors.