256 Kilobytes

Embedding Fonts with CSS and Base64

Articles in Style and Layout | By August R. Garcia

Published 11 months agoTue, 26 Feb 2019 11:29:50 -0800 | Last update 3 months agoTue, 19 Nov 2019 18:54:26 -0800

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

4,146 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-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.

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

Edit History

• [2019-02-26 11:29 PST] August R. Garcia (11 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
🗎 211 🗨 1090 🐏 328
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" attributeproxiessin, the developer console, literally every link building method, and other junk.

Available at arg@256kilobytes.com, via Twitter, or arg.256kilobytes.com. Open to business inquiries based on availability.

Account created 1 year ago.
211 posts, 1090 comments, and 328 RAMs.

Last active 22 hours ago:
Commented in thread Quality Content Dump: The Thread

Profile Photo - August R. Garcia August R. Garcia LARPing as a Sysadmi... Portland, OR
🗎 211 🗨 1090 🐏 328
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 11 months ago

Edit History

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

Sir, I can do you a nice SEO.

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.