29

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.

Community
  • 1
meder omuraliev
  • 1,701
  • 3
  • 20
  • 30

4 Answers4

27

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 *;
            }
    }
meder omuraliev
  • 1,701
  • 3
  • 20
  • 30
  • 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: http://blog.martinfjordvald.com/2010/07/nginx-primer/ – Martin Fjordvald Oct 03 '10 at 08:08
  • Someone actually mentioned that to me in the #nginx channel but I forgot to update the answer. – meder omuraliev Oct 03 '10 at 08:14
13
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 *;
}
Gilberto Albino
  • 103
  • 3
Diego Carrion
  • 266
  • 2
  • 3
  • 3
    **NOTE:** If the given solution doesn't work for you, read [this](https://github.com/h5bp/server-configs/issues/85) and [this](https://github.com/h5bp/server-configs/blob/master/nginx/conf/cross-domain-fonts.conf). It's enlightening, and you may find the reason it isn't working. – its_me Feb 28 '13 at 08:21
  • This does not work for me as the font url contain query string – Broncha May 03 '18 at 11:04
  • works for me... – Manan Shah Nov 02 '18 at 08:35
  • *Hint :* if you cloudflare purge them !! – shakee93 Aug 20 '19 at 08:57
7

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";
}
Community
  • 1
Pian0_M4n
  • 178
  • 1
  • 6
5

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;
}
user334690
  • 51
  • 1
  • 1