Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

How to avoid layout shifts caused by web fonts

simonhearne.com

Post reply on HN
Print view View original

21–30 of 126 posts

Re: How to avoid layout shifts caused by web fonts

#21

Post by KronisLV »

> Downloading one or two font files to render text won’t have a massive impact on speed, downloading five or ten font files will!

I wonder why we almost never talk about the actual filesizes of different fonts and which ones take less space, for when the total size of our webpages is important and we'd like to make our font choices with that in mind, provided that we don't want to just use the system fonts for whatever reason.

For example, i described some of the specifics of serving my own fonts on my site instead of using Google Fonts in a discussion about privacy some time back: https://news.ycombinator.com/item?id=29996364

The question that i posed in that comment still hasn't really been answered and is still relevant in my eyes:

> While we're on the topic of fonts, it's a shame that we don't think more about how heavy the fonts we choose to use are, since right now serving my own fonts eats up around half of the bandwidth on my non-image-heavy site. The single article that i've found on the topic so far as been this, "Smallest (file size) Google Web Fonts": http://www.oxfordshireweb.com/smallest-file-size-google-web-...

Why doesn't Google Fonts have a field somewhere that'd show the total size of a font in any number of supported file formats? Why do we have so much effort towards optimizing the sizes of images, and yet fonts don't get the same love?

Re: How to avoid layout shifts caused by web fonts

#22

Post by mrweasel »

chrisseaton wrote: post #14
mrweasel wrote: post #4

Earlier quoted context omitted.

I’m sure there’s a few exception, but why do anyone care about which font is used as long as the basics such as fixed or sans serif is applied correctly? The answer is most likely branding, but I don’t recall landing on a company website and going: “That’s not the font from their design guidelines. This is unacceptable, I shall take my business elsewhere” All this tweaking and hacking font loading is a vaste of time.

> why do anyone care about which font is used as long as the basics such as fixed or sans serif is applied correctly? Because typography is a means of communication.

I still don’t see how picking a custom font over a default one contributed much to communication. Sure, the font need to be legable, clear destinction between letters all that stuff, but the system fonts is most likely better than a custom one for those things anyway.

Re: How to avoid layout shifts caused by web fonts

#23

Post by mattbee »

He forgot one: inline the font data (evil cackle).

This made sense for me in conjunction with subsetting for a stopwatch app that only needs 10 digits and a colon.

I submit it's not so bad if you inline it with the rest of your styling, at least that's cacheable separate from the content.

Re: How to avoid layout shifts caused by web fonts

#24

Post by hexo »

mrweasel wrote: post #11
setr wrote: post #8

Earlier quoted context omitted.

Branding is bit subtler than that — you’re not going to really say anything about Target’s consistent styling, versus Walmart’s fairly austere aesthetic, but you definitely get a different “feel” from each, before looking at their actual contents/stock. I don’t know whether fonts are really that important to the total equation, but “not terrible enough to walk out the door” is generally a very low bar to meet when de…

I’m not sure I understand the point about enterprise apps, because that can go both ways. Custom company application tend to be the worst, because they apply all the company branding guidelines, rather than just applying to system defaults.

yup, users then even feel violated because some "great" manager somewhere told devs to screw over users settings and for example force user to look at animations, which is like 100 times worse than fonts mentioned earlier.

Re: How to avoid layout shifts caused by web fonts

#25

Post by jurnalanas »

You can use a library to take care a lot of FOUT versus FOIT experience. Face Observer (https://fontfaceobserver.com) lets you wait for the web fonts to load, then responds accordingly.

    var html = document.documentElement;
    var script = document.createElement("script");
    script.src = "fontfaceobserver.js";
    script.async = true;

    script.onload = function () {
      var roboto = new FontFaceObserver("Roboto");
      var sansita = new FontFaceObserver("Sansita");
      var timeout = 2000;

      Promise.all([
        roboto.load(null, timeout),
        sansita.load(null, timeout)
      ]).then(function () {
        html.classList.add("fonts-loaded");
      }).catch(function (e) {
        html.classList.add("fonts-failed");
      });
    };
    document.head.appendChild(script);

Re: How to avoid layout shifts caused by web fonts

#26

Post by hexo »

oefrha wrote: post #13
2Gkashmiri wrote: post #10

Earlier quoted context omitted.

i have tried to ask people a simple question. "why do you think you know fonts better than microsoft or apple?" not to even talk about linux for a moment here. do these multi trillion dollar companies making operating systems do a shit job at fonts that each and every website developer needs to use google fonts that increase dependency on third parties than using system default fonts?

Yes, Microsoft does do a shit job at fonts. Many Android vendors too. Don’t even get me started on Linux.

I love my linux fonts, there's nothing wrong with them. You must be out of touch with reality.

Re: How to avoid layout shifts caused by web fonts

#27

Post by fock »

chrisseaton wrote: post #14
mrweasel wrote: post #4

Earlier quoted context omitted.

I’m sure there’s a few exception, but why do anyone care about which font is used as long as the basics such as fixed or sans serif is applied correctly? The answer is most likely branding, but I don’t recall landing on a company website and going: “That’s not the font from their design guidelines. This is unacceptable, I shall take my business elsewhere” All this tweaking and hacking font loading is a vaste of time.

> why do anyone care about which font is used as long as the basics such as fixed or sans serif is applied correctly? Because typography is a means of communication.

Then they might stick to pdfs, ragged-left blocks of text suck.

Re: How to avoid layout shifts caused by web fonts

#28

Post by wakeupcall »

I just disable webfonts by default myself. I wonder how common that is. I never felt that I missed anything, because let's face it: in 99% of the cases you jump on a website through search and leave it within 60 seconds.

I make exceptions for websites that I visit regularly, where the most frequent breakage is a custom font that packs icons. On websites that I frequently read for documentation I sometimes even swap the font to something that I prefer (by injecting a @font-face src:local rule).

Designer's choice of fonts are frequently lower in legibility and/or do not have good hinting (not at the same level of most system fonts). On non-retina displays the qualitative difference is sometimes staggering.

Re: How to avoid layout shifts caused by web fonts

#29

Post by chrisseaton »

mrweasel wrote: post #22
chrisseaton wrote: post #14

Earlier quoted context omitted.

> why do anyone care about which font is used as long as the basics such as fixed or sans serif is applied correctly? Because typography is a means of communication.

I still don’t see how picking a custom font over a default one contributed much to communication. Sure, the font need to be legable, clear destinction between letters all that stuff, but the system fonts is most likely better than a custom one for those things anyway.

Design and art communicate. In fact, that's all they do.

Fonts are associated with different periods of time, different groups of people, different artistic and even philosophical movements. Picking a font can help communicate how you see yourself and what you are trying to achieve. A picture paints a thousand words.

A world without typography would be a poorer world.

Re: How to avoid layout shifts caused by web fonts

#30

Post by Aeolun »

KronisLV wrote: post #21

> Downloading one or two font files to render text won’t have a massive impact on speed, downloading five or ten font files will! I wonder why we almost never talk about the actual filesizes of different fonts and which ones take less space, for when the total size of our webpages is important and we'd like to make our font choices with that in mind, provided that we don't want to just use the system fonts for whatev…

Heh, if I serve custom Japanese fonts we happily go into the megabyte range.
Post reply on HN