Hotlink protection for web fonts

Many web font licenses require that the fonts files are hosted with some basic protections against direct downloads and the use on other websites (hotlink protection).

Example from Fonts.com:

Moreover, the web server must be configured in such a way that the web fonts cannot be easily downloaded via the input of a URL in the browser or a wget command. This is known as hotlink protection. In addition, you must ensure that the fonts cannot be linked by third party web pages.

I haven’t found a way in the Netlify documentation to e.g. restrict the access of a certain path such as fonts/* to requests with a HTTP header Referer: https://example.com/*, which is what would be necessary to comply with these requirements.

Is there a way to add hotlink protection for certain routes or file types, short of routing all font requests through Netlify Functions?

I don’t think there is, @msch - Functions would have been my suggestion.

If you proxy to another service that serves them through us (not using functions), you could set your remote server to verify a JWS that we set on your proxy redirect; see the signed= directive here: Redirects and rewrites | Netlify Docs . This wouldn’t exactly be preventing people from downloading via netlify, but it could ENSURE that they downloaded via netlify, which seems to meet the letter of the rules there, but probably not the spirit.

Thanks for your input, @fool. If I understand your suggestion correctly, I’m not sure how that would meet the requirements. It would prevent direct access to the files through this other service, but the access through Netlify would not be restricted in any way.

The way I understand these rules is that it should be impossible to just copy the link in the HTML/CSS files and download the web fonts this way. It’s not a real protection, of course, but the font providers want to make people jump through a few hoops to download web fonts of other websites to make it clear that this is a transgression.

I’m curious of how other people have solved this for their Netlify-hosted sites, given that many commercial fonts have similar requirements. Is nobody using self-hosted commercial web fonts? Are people hosting their fonts outside Netlify (e.g. with Apache and appropriate .htaccess rules)? Or is everybody just ignoring the rules and hosting them on Netlify without protection?

Hey there, thanks for providing a tricky question to think about! We don’t have any more advice for you at present for this use case. I’m going to go ahead an move this question to our #topics:opentalk area which is more of a free form discussion space so others can weigh in if they have additional ideas for you :+1:

1 Like

I’m sorry for bringing up an old thread.

I’m having the same issue at the moment and I wondering (and hoping) if anything has changed since the last reply?

Also, some font licenses don’t consider the use of CDNs even (or they do by demanding to add more domains to the license making it more expensive).

I just read a license that says: “You must ensure that the font(s) cannot be fully or partially extracted” - which seems a bit… impossible?

Thanks!

hey @anarodrigues - we don’t have anything new to share from our side, sorry.

Maybe others have additional thoughts or ideas?

Ideally we would be able to add conditions = {Referer = ["example.com"]} to our redirect configuration for the /fonts path, but I’m not sure how easy that would be to implement for Netlify.

As for now, I think the best option for performance would be to write a function that checks the referrer and responds with the fonts if the referrer matches. This way, the fonts are served from the same edge server (I think) and you can have all the code and files in a single repository and serve everything through Netlify. However, I think the function would run at every page load so it might become expensive on Netlify where they charge for the number of executions and not just the execution time.

Another option is to put the fonts into an S3 bucket, where you can restrict access by referrer. This looks relatively straightforward but it might bring down your performance a little since the fonts are not served through the Netlify CDN. Similarly, you can serve them from some Apache web hosting where you can restrict the referrer with a simple .htaccess.

If you want a CDN you can also serve the fonts through Cloudflare and restrict the referrer with the Web Application Firewall, which is a feature of the paid plan.

For now, I’ve just kept the sites with such web fonts on an Apache hosting so I wouldn’t have to deal with this issue yet. I’m genuinely curious though how all the other Netlify users are handling this. My suspicion is that many people just serve the fonts without restrictions and hope the license holders won’t notice.

That is two clever suggestions:

  • the feature request
  • and the function suggestion.

Hopefully we’ll be able to enable that workflow more directly soon, but…not yet, today.

1 Like

Thank you for this. I never used functions so I would need to have a look at that. If I may ask, how would that work for a website in a public repo in github, for example? Where would the fonts actually live? (since licenses usually mention that we can’t allow people to easily download the fonts).

CDN would be my second option but it conflicts with the font licenses’s weirdly outdated rules.

I reckon that many Netlify users haven’t bumped into this issue because it seems like a big majority of people are now using google fonts.

I suppose many of us are indeed hoping the license holders won’t notice.

The fonts would have to be stored somewhere they are not publicly accessible, such as a private repository on GitHub/GitLab. You could use environment variables to pass the secrets necessary to access the fonts to the build scripts. At least that is the solution I came up with when I was thinking about the issue, but I haven’t deployed it so far and it’s relatively complex for the simple task it should be doing (check header, serve fonts or reject request). If the fonts are on an Apache server somewhere, all this can be achieved with a very simple .htaccess.

1 Like

Thanks for sharing the ideas. We don’t really have a solution for this particular problem yet, but it’s one that might be covered in the future. Stay tuned!

Just want to +1 on this very important issue. Having to decide between professional grade fonts or a decent page speed really isn’t ideal.

2 Likes

Has anyone found a solution or workaround for this? This is the final roadblock to Netlify being the ideal platform for us.

The best option I’ve found so far is publishing them at some obfuscated address and then using a Cloudflare Worker that does the hotlink protection and only fetches the fonts from that address if the Referer matches one of the allowed host names. With a long TTL set for the Cloudflare cache you should get pretty good performance, but the whole setup is a bit cumbersome. I guess you could also build it with Netlify functions.

1 Like

Good news, everybody! We had a customer write up the journey to protect their fonts with Edge Functions, which is the best general purpose, available to all account levels, functionality we have to do this.

You can read more here: How to add hotlink protection to your web fonts with Netlify Edge Functions and Deno - DEV Community