Thursday, November 14, 2024

How to Appropriate Custom Fonts from other Websites

How to Appropriate Custom Fonts from other Websites

In my Manage Web Fonts using CSS3 article, we learned how to incorporate font files into our web pages using the CSS3 @font-face rule. As an example, we downloaded a free font from fontsquirrel.com, one of the many repositories of custom fonts. Most providers offer their fonts at no cost, which is a good thing, because once a file has been uploaded to the web server, it is accessible to everyone to download. They have to be, so that the browser can display them! In today’s tutorial, we’ll see how easy it is to appropriate a custom font from a web page for your own use.

Is This on the Up-and-up?

Absolutely! You see, for a page element to appear in a browser, it has downloaded from a publicly accessible host. For that reason, if it’s viewable in your browser, it can’t be reliably protected. The best you can do is put up a few hurdles to discourage casual misuse and to make it clear that appropriating web fonts from a site is an intentional act. In the case of free fonts, there really is no legal or moral imperative to protect the font files because they tend to be licensed under a public open source agreement. Licenses for paid fonts tend to include a clause about protecting the files, but it’s widely understood that there are very real limitations to how much you can do in this regard. Here’s a typical protection clause with the brand name removed:

To the extent technically achievable, you and any third party web font hosting service are responsible for protecting against access to the Font Software, in its original form, in any unauthorized manner including referencing by any unauthorized Web Site or Electronic Content. The failure to adequately protect the Font Software used in the Electronic Content against Use by other electronic content shall be considered a breach of this Agreement.

Now that we know that any font file is fair game, should you encounter any copyright warnings in the source markup, it’s your call as to whether or not you want to proceed to acquire the font or look for an alternate one instead.

Determining the Font Format

There are two ways to load custom web fonts into a page: the first is via external font files; the second is using Base64 encoding.

To determine which technique is being employed, download the page using the browser’s Save As… command. Then take a look at the downloaded files on your drive. The presence of one or more font file types will confirm the former loading technique.

downloaded files in windows explorer

The absence of font files is just as telling and points to Base64 encoded fonts. Open the CSS file(s) in an editor and look for the @font-face rule. It will contain the “base64” encoding identifier there. Laughably, base64 encoding is supposed to act as some sort of code obfuscation tactic. I’m not sure how viable a strategy that can be when the @font-face rule is clearly legible!

@font-face{
 font-family: Bazar;
 src: url(data:font/ttf;base64,AAEAAAATAQAABAAwR1BPU+Df...
}

Another strategy for protecting against font appropriation is whitelisting, whereby only approved domains may download the font files. This necessitates a site’s web server to fetch the font files from a central repository and then serve them to the requesting browser. While this does provide adequate protection against hotlinking, once the font files have been downloaded to your browser cache, all bets are off.

Using a Font in Your Web Page(s)

All that’s left to do now is reference the font(s) in you web page(s).

    1. First, copy & paste the @font-face declaration into your CSS file.
    2. To set an element’s font set its font-family to the custom font name:
      <h2 style="font-family: Bazar; font-size: 2.75em;">This header should be in the Bazar font</h2>
      
    3. If the font is stored in font files, be sure to upload those to the same directory as your CSS file(s) on your server.

To demonstrate how easy it is to do, I appropriated the Bazar font from an article on Base64 encoding by Patrick David.

Here is my page using the appropriated font.

Conclusion

Appropriating web fonts from other sites is a piece of cake once you know how they work. It is also perfectly reasonable to do so. As mentioned above, free and commercial fonts alike must be downloaded by your browser in order to display them. Once that occurs, font files and encoding, like all page assets, are yours to do with as you please.

Rob Gravelle
Rob Gravelle
Rob Gravelle resides in Ottawa, Canada, and has been an IT guru for over 20 years. In that time, Rob has built systems for intelligence-related organizations such as Canada Border Services and various commercial businesses. In his spare time, Rob has become an accomplished music artist with several CDs and digital releases to his credit.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured