How does @font-face work?

Question

I am aware that using @font-face allows the browser to download a custom font and use it in a web page just like any system font.

What I want to know is if the browser encodes the font or uses it without exposing it?

Thanks

Answer 1

The browser cannot protect the source of the fonts. Once the information gets received by the browser, you can safely assume that the user will have full access to whatever you send it.

Thus the problem of keeping the fonts secure is done on either on the legal level (by choosing fonts which allows for embedding) or through server side obfuscation schemes. For instance, look at the fonts embedded through TypeKit:

@font-face {
    font-family:"rosewood-std-fill-1";
    src:url(data:font/opentype;base64,d09GRgABAAAAAEa4ABMAAAAA2XwA.....);
    font-style:normal;
    font-weight:400;
}

The font is obfuscated through a base64 encoding process. Additionally, the font is split in two and the number of glyphs are limited to only the ones needed by the website.

On the other hand, looking at FontSquirrel and Google Font API @font-face kits, you can see that the actual source of the font is sent to the user - no obfuscation required. Additionally, font owners may demand some form of attribution, such as

If the font is a free font ($0.00 license fee), you may use this font for Font-Face embedding, but only if you put a link to www.exljbris.nl on your page and/or put this notice

/* A font by Jos Buivenga (exljbris) -> www.exljbris.com */ 

in your CSS file as near as possible to the piece of code that declares the Font-Face embedding of this font.

seen in this license. Therefore, from all of these, we can safely conclude that the problem of font security does not happen on the client side, but rather falls on the shoulder of the developer, and so browsers cannot and do not do anything to stop users from gaining access to these fonts.

Answer 2

@font-face tells your browser where to download the actual font.

For example, when using Google's web fonts, they give you CSS like this:

@font-face {
  font-family: 'Cantarell';
  font-style: normal;
  font-weight: normal;
  src: local('Cantarell'), url('http://themes.googleusercontent.com/font?kit=p5ydP_uWQ5lsFzcP_XVMEw') format('truetype');
}

If you open the url (http://themes.googleusercontent.com/font?kit=p5ydP_uWQ5lsFzcP_XVMEw) your browser will download the actual true type font file.

I've downloaded google's fonts using this method (so my Photoshop mock ups have the correct font).