21

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.

  • You also can add "otf" in your rule – Kevin Campion Jan 22 '13 at 0:04
19

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 *;
            }
    }
  • 8
    No. You really don't. You just need to learn about context inheritance. If you specify the site root directive in your server block then it'll be available in all location blocks. I suggest you read this: blog.martinfjordvald.com/2010/07/nginx-primer – Martin Fjordvald Oct 3 '10 at 8:08
  • Someone actually mentioned that to me in the #nginx channel but I forgot to update the answer. – meder omuraliev Oct 3 '10 at 8:14
11
location ~* \.(eot|ttf|woff)$ {
    add_header Access-Control-Allow-Origin *;
}
  • 3
    NOTE: If the given solution doesn't work for you, read this and this. It's enlightening, and you may find the reason it isn't working. – its_me Feb 28 '13 at 8:21
  • This does not work for me as the font url contain query string – Broncha May 3 '18 at 11:04
  • works for me... – Manan Shah Nov 2 '18 at 8:35
5

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";
}
3

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;
}

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.