home ~ socials ~ projects ~ rss

base64 Font Sizes for Embedding in CSS

September 2025

I'm considering embedding fonts inside HTML documents by encoding them in base641 and dropping them in inline <style> tags:

<style>
@font-face { font-family: 'roboto';
  src: url(data:font/ttf;
  charset=utf-8;base64,AAEAAAAWAQAAB...)
  format('woff');
}
</style>

Where the AAEAAAAWAQAAB... represents the base46 encoded string for the font file.

The first thing I wanted to see if how much bigger the .html file would be. I used the Roboto2 font for a test.

Uncompressed
  • Roboto .ttf file: 468 KB
  • base64 string: 624 KB
Compressed
  • Roboto .ttf file: 266 KB
  • base64 string: 317 KB

Conclusion

The compressed numbers are what matters when it comes to impact on downloading3.

Using a traditional URL call pushes 266 KB over the wire. Embedding the font in a base64 string increases the bandwidth cost to 317 KB.

That's more than I'd want to add inside the file.

~a

end of line

Endnotes

I was thinking about this as a way to help avoid things jumping around as fonts load. There are, of course, other loading techniques designed to address that. I need to dig into them more to pick the approach I want.

I don't know what my breakpoint for embedding would be. It would be a no-brainer if it was 1 KB. 30-40 KB? Probably. More than 50? It gets unlikely.

If I wanted to make sure the font would be used 100% of the time doing the embed makes sense. But, I'd rather keep the HTML file size smaller and pull the font as a secondary file. That'll provides the opportunity for the page to load as fast as possible. Potentially with the default font if the custom one doesn't load fast enough.

Embedding the font directly in the file means means the size increase would happen on every page. Using the URL approach lets the browser cache the file. It would only get hit with the download once.

If folks spend time on the site bouncing to different pages that's and easy call. Go with the caching. I don't have stats, but I expect most folks hit one page and then bounce. Caching doesn't matter for the behaviour.

References

Footnotes

1 ⤴

Font files are built in a way that they can't be included directly in HTML or CSS files. "base64 encoding" is a way to transform them so they can be.

2 ⤴

The number one ranked font at press time.

3 ⤴

This assumes the server is properly compressing files.

Share link:
https://www.alanwsmith.com/en/32/h6/ik/mm/?base64-font-sizes-for-embedding-in-css