Fonts blocked by CORS policy on localhost: How to fix that

no alt text set

I’m using MAMP Pro and have a separate Host setup for each of my website projects. This let’s me navigate to local.mydomain.com instead of localhost:8888/mywebsitedirectory. You can easily setup local.mydomain.com to be a.b.c if you wanted; this is my convention for projects. Helps me separate local dev with production and sandbox/staging sites.

Since i decided to serve fonts locally as web fonts instead of grabbing them from Google or TypeKit or wherever, i noticed this while looking in DevTools:

Access to Font at 'http://localhost/_Personal-Projects/_Sites/macariojamesdotcom/blog/wp-content/themes/mj1/public/fonts/work-sans-v3-latin-regular.ttf' from origin 'http://local.macariojames.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://local.macariojames.com' is therefore not allowed access.

The issue as it states is there’s no header in the server’s configuration (Apache or nginx) to tell the server to allow the serving of fonts across domains, hence the CORS policy issue.

Relatively simple fix as long as you have permission to edit your .htaccess or httpd.conf file depending on server type.

Here’s code for both:

# Apache config
<FilesMatch ".(eot|ttf|otf|woff)">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>

# nginx config
if ($filename ~* ^.*?\.(eot)|(ttf)|(woff)$){
    add_header Access-Control-Allow-Origin *;
}

Ta-da. Save your file, restart server (if applicable), and try again. Hope that helps.

Wondering why you keep seeing lowercased 'i' in my posts? Read -> Why ‘i’ is not capitalized

Leave a Reply

avatar

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
Notify of