How base64 encoding font files can allow for some moderately interesting workarounds on various blogging platforms.

Out-of-the-box cross-browser font support is fairly limited. You’ve got a choice between serif, sans serif, and monospace, and that’s about it.

Using resources from Google Fonts or other can open a lot of options up for you. Typically, these are included either by:

Hotlinking to the location of these resources (such as to the file on Google’s server, for Google Fonts); or

Directly downloading the resources and uploading to your own server.

But, neither of these solutions work for certain use cases. Some font providers (that aren’t Google Fonts) have no supported hotlink, which rules out the first option. And for some blogging platforms, such as Blogger, users have no way of uploading the required font files (such as.tff) directly to the site’s server.

One solution here is to base64 encode the images. Base64 encoding, which is discussed in more depth in this article on how email works, allows for arbitrary resources to be included as ASCII characters, rather than as external files. In the case of .tff font files, after base64 encoding the resource, it can be included like this:

@font-face{ font-family: [Font Name]; src: url(data:font/ttf;base64,[...]) format('truetype'); }

What a neat trick.

Also see [Solved] Favicon.ico Files not Caching on Chrome for another quality base64 hack.

Share This Post

Download more RAM. 🐏 ⨉ 0 Posted by August R. Garcia 1 year ago Edit History • [2019-02-26 11:29 PST] August R. Garcia (1 year ago)

🕓 Posted at 26 February, 2019 11:29 AM PST