Follow

Guess who’s going to be using system fonts for this site after tallying up the bandwidth budget for his current design that uses 6 weights of Inter and 2 of Fira Code.

I simply cannot justify decoration that’s 10x the size of the content.

@aral I wonder how you make it to 715KB fonts, how many are these? .-.

Even with 4 different fonts (one icon font) my webpage makes it just to 150KB.

Are you calculating by adding up each font format (i.e. woff, woff2, tff, eot, …)?

@aral Sure you can. You just need a justification engine that's 10x the size of your fonts ;-)

@aral you can also use optional webfonts to improve 2+ visits, with no impact on first visit.

@borisschapira Hadn’t heard of that; will check it out, thanks :)

@aral afair Fira is particularly big, you can switch to another font, use a smaller subset and/or fewer weights, too.

Generally though I think investing bandwidth in text is worth *a lot*. It if it raises readability and overall design quality, this is where you want to invest.

Think about it: Text *is* your content, so the font is more than decoration. … If you know how make proper use of fonts 😏

@mray @aral Also only use Woff fonts, you don't need TrueType en SVG fonts any more since all modern browsers support the Woff-format. For older browsers you can fall back to system fonts.

@desikn @mray Yep, was only using Woff2 – but had six weights. Just tested on all major platforms, etc., and very happy with how the system font stack renders. Except on Firefox on Linux where it refuses to render installed system fonts and defaults to Bitstream Vera for some reason.

@aral @mray Check whether Bitstream Vera is set as default font in Firefox preferences, if you haven't yet. Otherwise Firefox should render the correct font.

@mray Indeed; I did do an MA in electronic design and took my share of typography classes and I consider myself a designer but my original point stands – I’m not going to force Inter down someone’s throat when I can get the same/superior rendering and range of weights with San Francisco on iOS or with Ubuntu on, well, Ubuntu, etc.

@aral I’m on a 64 Kibit/s connection this month. 715 KB of fonts takes 1 min and 49 seconds to download under ideal conditions. The content alone would take 12 seconds. It really is worth it to enable Brotzli compression, and apply Guetzli to your JPEGs and Zopfli to PNGs.

@da Thanks, will check all those out today :)

@aral Remember to re-package JPEGs with proressive mode enabled. Progressive images can do multiple rendering passes as data becomes available. Uses more CPU on slow connections but you get to see a blurry/blocky preview of the image without waiting for the whole image to load. (run `jpegtran -progressive` on the image output by guetzli). It's waaay better than seeing nothing while waiting. Interlaced PNGs does the same but adds +30% size. Enabling progressive JPEGs adds +/- 10 bytes so well worth it.

Sign in to participate in the conversation
Aral’s Mastodon

This is my personal Mastodon.