1
votes

I have a Wordpress site installed over Nginx / Ubuntu, Digital Ocean Droplet.

Currently, i am optimizing the pages performance. Pingdom FPT recommended serving static files through a cookieless domain. I have set it up, and now it is serving files from the static subdomain.

However, with fonts i am facing CORS issues:

Using Chrome Console:

Access to Font at 'http://static.ux-labs.com/themes/uxlabs/betheme/fonts/mfn-icons.woff?3416171' from origin 'http://static.ux-labs.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Origin 'http://ux-labs.com' is therefore not allowed access. (index):1 Access to Font at 'http://static.ux-labs.com/plugins/js_composer/assets/lib/bower/font-awesome/fonts/fontawesome-webfont.woff2?v=4.5.0' from origin 'http://static.ux-labs.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Origin 'http://ux-labs.com' is therefore not allowed access.

I tried adding to the theme header.php

<?php /** @package WordPress @subpackage Default_Theme  **/
    header("Access-Control-Allow-Origin: *"); 
?>

But it did not work.

I also tried adding in the nginx server.conf

location ~* \.(eot|otf|svg|ttf|woff|woff2)$ {
    add_header Access-Control-Allow-Origin *;
    expires max;
}
1
Any progress on this? - nupac

1 Answers

3
votes

It should work as you've written it in a "standard" nginx config....

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

One thing to note is that you want to make sure you don't have another location block with those file extensions in a regex. I had 2 blocks declared with font file extensions and the first block loaded but not my CORS policy block. Once I loaded only 1 block with those extensions everything worked fine.

Without seeing your full config it's hard to tell where it might be failing you.