How does @ font-face work?

Question

I know that using @ font-face allows the browser to load a custom font and use it on a web page, like any system font.

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

thanks

Answer 1

The browser cannot protect the font source. Once the information is received by the browser, you can safely assume that the user will have full access to the fact that you send it.

Thus, the problem of preserving protected fonts is carried out either at the legal level (by selecting fonts that allow embedding) or through obfuscation schemes on the server side. For example, look at the fonts embedded in 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 the base64 encoding process. In addition, the font is divided into two parts, and the number of glyphs is limited only by those that the website needs.

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

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

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

in your CSS file as close as possible to the code fragment that the Font-Face font insert of that font declares.

seen in this license . Therefore, from all this we can safely conclude that the problem of protecting fonts does not occur on the client side, but rather falls on the shoulder of the developer, and therefore browsers can not and do nothing to stop users from accessing these fonts.

Answer 2

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

For example, when using Google web fonts, they give you CSS as follows:

 @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 font file of the true type.

I downloaded Google fonts using this method (so my Photoshop layouts have the correct font).

Answer 3

In most cases, the font file is displayed in the form in which it is directly linked to your CSS file, and thus, any reasonable user can download the font and install it on their computer. This is partly due to the fact that most commercial font licenses prohibit their use on sites with @font-face . But there are methods that limit this. For example, check the Internet Only option in the Font Squirrel @ font generator.