How can I make nginx support @font-face formats and allow access-control-allow-origin?

Solution 1:

Woot! Got it.. It was pretty much what I suspected in my edit, I had to basically do the regex filename check in my sole location {} instead of making an alternative one.

    location / { 
            root /www/site.org/public/;
            index index.html;

            if ($request_filename ~* ^.*?/([^/]*?)$)
            {
                set $filename $1; 
            }

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

Solution 2:

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

If you have other font extensions, pay close attention to add them as well. Nowdays it common to have: eot|ttf|woff|woff2|svg, so you should adjust like so:

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

---

Solution 3:

All assets

This will make all assets work fine. You can add root if you want to define a new location

location ~ \.(js|css|png|jpg|jpeg|gif|ico|html|woff|woff2|ttf|svg|eot|otf)$ {
    add_header "Access-Control-Allow-Origin" "*";
    expires 1M;
    access_log off;
    add_header Cache-Control "public";
}

---

Solution 4:

another solution : put all your fonts in, for example, static/fonts, and add

location /static/fonts  {
    add_header "Access-Control-Allow-Origin" *;
    alias /var/www/mysite/static/fonts;
}