256 Kilobytes

Embedding Fonts with CSS and Base64

Articles in Style and Layout | By August R. Garcia

Published 2 months agoTue, 26 Feb 2019 11:29:50 -0800

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

3,194 views, 0 RAMs, and 1 comment

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.

Download more RAM. 🐏 ⨉ 0 Posted by August R. Garcia 2 months ago 🕓 Posted at 26 February, 2019 11:29 AM PST

Profile Photo - August R. Garcia August R. Garcia LARPing as a Sysadmi... Portland, OR
🗎 136 🗨 707 🐏 164
Site Owner

Grahew Mattham

August Garcia is some guy who used to sell Viagra on the Internet. He made this website to LARP as a sysadmin while posting about garbage like user-agent spoofing, spintax, the only good keyboard, virtual assitants from Pakistan, links with the rel="nofollow" attributeproxies, regular expressions, HTML and CSSsin, the developer console, and probably some other trash.


Account created 5 months ago.
136 posts, 707 comments, and 164 RAMs.

Last active 2 hours ago:
Commented in thread Social Media Post Dimensions

Profile Photo - August R. Garcia August R. Garcia LARPing as a Sysadmi... Portland, OR
🗎 136 🗨 707 🐏 164
Site Owner

For context, this site uses four fonts (Barlow, Barlow Condensed, Barlow Semi-Condensed, and Rokkitt), which come to a total of 159.7 kllobytes worth of data. Base64-encoded files are around 1.33 times as large as their original source, so that would be:

  • 159.7 Kilobytes * 1.33=212.401 Kilobytes

Assuming the base64 encoded fonts were actually within a CSS file (so that the CSS file could be cached, rather than including it between <style> tags in the main HTML), the overhead would be fairly minimal even with a few fonts.

Troll Level: 3 of 5

Download more RAM. 🐏 ⨉ 0 Posted by August R. Garcia 2 months ago

Edit History

• [2019-03-10 21:02 PDT] August R. Garcia (2 months ago)
🕓 Posted at 10 March, 2019 21:02 PM PDT

The CIA wants all code in the cloud under their lock and key. They want to ban compilers and make people think HTML is computer programming. - Terry A. Davis

Post a New Comment

To leave a comment, login to your account or create an account.

Do you like having a good time?

Read Quality Articles

Read some quality articles. If you can manage to not get banned for like five minutes, you can even post your own articles.

View Articles →

Argue with People on the Internet

Use your account to explain why people are wrong on the Internet forum.

View Forum →

Vandalize the Wiki

Or don't. I'm not your dad.

View Wiki →

Ask and/or Answer Questions

If someone asks a terrible question, post a LMGTFY link.

View Answers →

Make Some Money

Hire freelancers and/or advertise your goods and/or services. Hire people directly. We're not a middleman or your dad. Manage your own business transactions.

Register an Account
You can also login to an existing account or recover your password. All use of this site is subject to terms outlined in the terms of service and privacy policy.