Securing @font-face
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!
- 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:
- Paul Irish: Prevent FOUT (Flash Of Unstyled Text) and Quicken the load time
- Paul Irish: Employing Custom Fonts Now! [update from comments]
- Typekit: Serving and Protecting Fonts on the Web [other techniques]
Great stuff Aaron.
In my presentation on Custom Fonts… Now (http://paulirish.com/customfonts/) I reviewed a few things that can be done to secure the font data (slides 34-39):
* deliver as data:uri
* data:uri fonts haven’t been proved to work in IE8
* mhtml fonts have not been seen working in ie6/7
* subset to what’s needed: http://www.twardoch.com/webfonts/
* segment across multiple files
* define allowed referrers
* cross-origin acccess control
* http://pastie.org/653265
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.
doesn’t this become moot if the user running the browser just snarfs the raw data that is coming in ?
@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!
Just to keep things linked…
I’ve recently proposed a few modifications of the font file itself that prevent the font from being installed:
http://typophile.com/node/70404
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
I would like to use it. May I?
Hi Aaron, I actually need something like what you have created. May I use it as well?
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?
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.
May I please try SPiFY? :)
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.
Hi Aaron, please can you share with me code for SPiFY. Thanks.
Hi Aaron,
Could you please share SPiFY with me? Thanks in advance!
Hi Aaron,
It would really appreciated if you could share the code for SPiFY.
Thanks very much
I’ve updated the post with a link to a zip of the code. Good luck all!
This looks promising. There are some pbmelros. I use Dreamweaver CS5, and the various web page preview options I have available within the program are inconsistent in displaying the Google web fonts. I have to actually upload and view the live page online to see how the fonts will be displayed. I do not have the latest versions of all the browsers I will mention, but I do have recent versions. Firefox, Chrome, and Safari seem to display the Google fonts accurately. Explorer displays the fonts, but not the added drop shadows. Opera displayed the drop shadow, but not the correct font. It is always difficult to embrace something new when it behaves inconsistently.