Nginx – How to make nginx support @font-face formats and allow access-control-allow-origin

http-headersnginx

I've added these rules to mime.types:

application/x-font-ttf                ttf;
font/opentype                         otf;
application/vnd.ms-fontobject         eot;
font/x-woff                           woff;

Now the Content-Type header is being set properly per each of those. My only issue now is that Firefox requires Access-Control-Allow-Origin. I have googled this answer and added this to my server directive:

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

but now my fonts aren't being served at all.

Instead the error.log reports that it's trying to open them on the local filesystem..

2010/10/02 22:20:21 [error] 1641#0:
*15 open() "/usr/local/nginx/html/fonts/mgopenmodernabold-webfont.woff"
failed (2: No such file or directory),
client: 69.164.216.142, se rver:
static.arounds.org, request: "HEAD
/fonts/mgopenmodernabold-webfont.woff
HTTP/1.1", host: "static.arounds.org"

Any ideas what could be off with the syntax? Do I need to explicitly add a rule saying don't try to open it locally or what?

EDIT: I think the problem is that I'm serving 2 different locations now. And instead of that I should do the regex check inside of the main one then feed the header.

Best Answer

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 *;
            }
    }
Related Topic