ObjectiveSubject »

Securing @font-face

With all of the daily developments in the webfont discussion, the security of font files is a bit sidelined. For foundries, companies, and designers, the security of a font can have legal, competitive, and moral ramifications (which I won't cover here). A web-specific font format, like WOFF, may appear to offer consolation to foundries but relying on browser implementation of any feature is historically dire. I say watch your own ass(ets). I propose a server-side lock and key: Simple PHP Font securitY (SPiFY).

by Aaron

17 Comments

The basic, insecure @font-face has CSS specify a font file with its name and address out there in the naked. Any user with a little know-how can simply type in the address and download the font. I set out to put a chastity belt on it, giving the key only to it’s suitor: my trusted CSS. When a stranger tries to access the font nothing is downloaded, only a message shows up instead; let’s say license info or where to buy the font.

Note: I have removed the code as understanding how it works makes it vulnerable. You may download the files and try it yourself!

An example of @font-face using my badly drawn Sharp Serif.

A demo of @font-face using my badly drawn Sharp Serif.

This isn’t foolproof but it is fun. I should just stress that you need to check the EULA of your commercial fonts or negotiate with the foundry, and present clients with the pros/cons of this solution.

There are plenty of other issues that accompany the use of @font-face. Compression is a biggy, and that’s something WOFF will help with.

Good resources for other issues:

17 Comments

    • by Aaron
      8 November 2009

      Thanks Paul!

      You are indeed the expert, so I appreciate your points. What do you think of the php sessions idea? Does it work in concert with any of your solutions? I could see using sessions and data:uri, for example.

      I’ve also been looking into my own compression to augment subsetting, but to no success yet. I’ve got fully functional fonts down to 30 kb, but that still leaves a bit too much FOUC.

      Aaron.

    • by robotarmy
      22 December 2009

      doesn’t this become moot if the user running the browser just snarfs the raw data that is coming in ?

    • by Aaron
      22 December 2009

      @robotarmy I assume by snarfing raw data you are referring to hacking the browser’s cache? The security of the cache is up to the browser, nothing we can do about it. If you can get something functional from my demo, do let me know!

    • by olt
      10 June 2010

      Nice trick, but security by obscurity never works. It’s like disabling the right click to prevent that someone “steals” you code. You just block the easy and obvious route.

      edit: removed instructions for the bypass

    • by Gideon
      7 August 2010

      Hi Aaron, I actually need something like what you have created. May I use it as well?

    • by Guillem
      23 January 2011

      Hi Aaron,

      Although I’m not a web developer (I’m a web designer) I’d like to try your SPiFY. May I have the code?

    • by Jason Lafferty
      3 March 2011

      Hi Aaron,

      Would it be possible for me to try your SPiFY code?

      I have been looking for an idea for security fonts used via @font-face for a while now for a project I’m working on.

    • by Deloise
      29 March 2011

      Some genuinely nice and utilitarian info on this internet site , besides I think the style contains superb features ;)

    • by Brandon Webster
      19 June 2011

      Hey Aaron, I sent you an email requesting the method for protecting @font-face files, could you please hook me up with the information needed to protect my fonts? I am building a website for a type foundry and it is essential that we find a way to secure the fonts or obscure the path to them.

    • by Fernando
      21 July 2011

      Hi Aaron, please can you share with me code for SPiFY. Thanks.

    • by Dinis Correia
      1 August 2011

      Hi Aaron,

      Could you please share SPiFY with me? Thanks in advance!

    • by Aaron
      23 August 2011

      I’ve updated the post with a link to a zip of the code. Good luck all!

Leave a Reply