3 ms·
> The 3 that my blog[0] uses are base64 URLs in my single 100k CSS file. This is not an efficient approach. Base64 will make the fonts about 30% bigger, and w
by SquareWheel 4y ago
> The 3 that my blog[0] uses are base64 URLs in my single 100k CSS file.
This is not an efficient approach. Base64 will make the fonts about 30% bigger, and webfonts are already too big. The fact that it's in CSS also means that it's now render blocking, and font-display can't be used.
You're likely delaying your render time versus standard font loading. Do a comparison in WebPageTest and examine the waterfall.
- Schroedingersat 4y ago> Base64 will make the fonts about 30% bigger, and webfonts are already too big Does this actually change the transmitted size significantly?
- theandrewbailey 4y agoAfter gzip or brotli, the increased size of base64 is negligible. That 100k CSS is less than 70k compressed.
- SquareWheel 4y agowoff2 is already a highly-compressed format so you shouldn't expect much in terms of savings. Maybe gzip could offset some of the fat added by base64 though. 100KB for a font is a lot of data on a website. I'm using a custom subsetted version of Source Sans Pro at just 6.7KB.