16 ms·

How to avoid layout shifts caused by web fonts

• tomcooks 5y ago
  > Most designers will cringe at the thought of showing users a fallback system font. Explaining them that web is not paper, helps removing a lot of this childish behaviour.
  • deanc 5y ago
    Except it doesn't. The usual fallback I've experienced (been told to do) to this is to preload the whole site behind a loading bar instead :)
    • sdoering 5y ago
      I was told so recently. But it wasn't even for the font loading. It was to load the animated transition to transit from nothing to the entry page. So to instead of dropping (or at least thinking about optimizing) the loading transition the designer (with a straight face) proposed a loading bar for the loading of the loading animation. I was lost for words. [Edit: typo]
  • mrweasel 5y ago
    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.
    • thingsgoup 5y ago
      I gather from your comment that you don’t do frontend. I don’t either. I also think it’s a waste of time. But I think you and I are not the intended audience. I think frontend people are trying to design an experience for users. The same way you or I might be designing an architecture for the system. They want it to look and feel a certain way in order to provoke a response.
      • MrPatan 5y ago
        I do front end. It's a waste of time. Pick a common one you like and move on.
    • setr 5y ago
      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 designing a thing. Another example in the app space — you know enterprise apps will get the job done, but they’re downright unpleasant to use; from aesthetics to workflow efficiency, they just barely hover over “dealing with it isn’t worth the output”. But that’s generally not where you want things to sit as a design goal.
      • mrweasel 5y ago
        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.
        • setr 5y ago
          I’m not making the case that one being better than the other, or really trying to say anything about custom vs enterprise. My main point is simply that there’s a significant gap between “it can be used” and “it can be used well” — and a designer’s primary job is to bridge that gap (generally the engineer in us takes us to “it can be used”). That (some? many? majority?) designers aren’t competent is a separate concern… but their abstract goals are fairly obvious and intuitive if difficult to specify concretely And we understand this intuitively, because there are many apps in our section of the universe that fall under it can be used — back-office apps, enterprise apps, etc a constant offender (not say good ones don’t exist, or bad custom apps don’t exist, or bad designers/designs don’t exist… etc — but we’ve all probably encountered a good few that are astoundingly unpleasant to use)
        • hexo 5y ago
          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.
    • chrisseaton 5y ago
      > 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.
      • mrweasel 5y ago
        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.
        • chrisseaton 5y ago
          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.
          • zelphirkalt 5y ago
            Then why not share all typography with everyone under a license, that allows every OS maker to include all the fonts they want plus allowing users to choose what else to install and then only use system fonts? That way we can have it all, fast websites, without additional secret server side tracking, and the fonts of the system being used and the artist getting their message communicated. No need for any web font.
            • chrisseaton 5y ago
              I guess there aren’t any commercial incentives to do that. But that doesn’t change that typography is valuable.
              • zelphirkalt 5y ago
    • hexo 5y ago
      Exactly!
  • l0b0 5y ago
    I guess it's a good thing the web is built for users rather than designers, then, isn't it? Oh wait. On a more serious note, screw all the font **ery. Settings → Language and Appearance → Advanced → untick Allow pages to choose their own fonts, instead of your selections above. Better to have some crappy websites glitch out a bit than get a headache from trying to read 200 different fonts in a day.
    • foxfluff 5y ago
      Given freetype's long history of buffer overflows, I think disabling web fonts is a very good idea.
    • s5806533 5y ago
      > Settings → Language and Appearance → Advanced → untick Allow pages to choose their own fonts, instead of your selections above. Done! Thanks for the reminder!
      • iforgotpassword 5y ago
        I switched to using ublock origin to do that, since I can quickly add an exception for a site. Some sites use fonts for icons. Most of them are still usable but just look a bit silly, but sometimes it's annoying to the point that I want to add an exception.
        • l0b0 5y ago
          Let's see if I get this right: (0. Install uBlock Origin) 1. Re-enable web fonts 2. In the main UO settings, check "Block remote fonts"? 3. Refresh a page 4. Click the UO icon, and then "more" until I see an icon titled "Click to no longer block remote fonts on this site" 5. Click 6. Refresh the page Repeat 4-6 for relevant sites. Any caveats?
          • iforgotpassword 5y ago
            Yep that's how I so that, although in step 4 I don't have to click "more", I immediately have an icon with a capital A that toggles fonts at the bottom. But maybe I configured it to automatically expand something that is by default hidden behind a more button... I honestly don't remember.
  • rtpg 5y ago
    I do think that sites should strive to "just work" with nice system fonts (and respect user agent settings), but this is just an obtuse answer. You can ship your own fonts. Everyone and their dog uses one of two web browser engines. People want their websites to "look right". You can offer a fully specified look!
    • Gigachad 5y ago
      And there is always someone on XP who complains your website looks like crap because their defaults look like crap while every other website bundled it’s own fonts and inputs.
      • hexo 5y ago
        Yea, windows XP has to be supported, sure. But then suddenly drop support for firefox because no one uses that. Meh.
  • Raed667 5y ago
    Designers want the web-app to look like their figma. Most are not willing to compromise on that. It takes senior engineers (with weight in the company) to lead the effort to force design to concede on certain things like this.
    • Cullinet 5y ago
      everything that I use computers for has been ultimately to produce aesthetics to my exacting standards a example of which is the 8 years taken from first sketch of my redesign for the company logo to first example of use. But I refuse to allow applications like Figma on my company computing assets. You probably wouldn't be hired if you used such things as part of your work flow anyway. Good design begins with pencil and paper and writing down the words describing what you are trying to accomplish. Art has its own internal function and architectural laws of physics and materials sciences. Great art is like cathedrals (of very well thought out bazaars) the culmination of not only one or more crucial leaders of the design, but the ecosystem of cultural heritage and interpretation and conversation and argument that you are communicating with the viewer. When your typical Figma dogmatic sees their font rendering to their knee jerk repulsion that's really being affronted to have their South Park Authority challenged, all I am seeing is the subtleties and nuances of a critic composition potentially becoming unstable rather in the manner a engineer sees weakening structures and worries about how long and effectively can the edifice perform it's intended task.
      • bschwindHN 5y ago
        I can't tell if this is a joke or not, we're talking about websites.
  • 2Gkashmiri 5y ago
    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?
    • Leherenn 5y ago
      Not particularly a fan of custom fonts, but fonts are not one size fits all. Apple or Microsoft default fonts are designed for the general use case, and other fonts might be more suited in a different context. Whether that's worth the cost, that's a different question.
      • 2Gkashmiri 5y ago
        come on. i am not expecting to visit an art gallery when i browse the current website or your local news portal or a blog or youtube. do you really think each and every website "needs" to individually tailor fonts to their "exact millimeter position" or otherwise the result will be utter garbage? >and other fonts might be more suited in a different context that is why "general use case" is my point. can you point me a specific example of where my current default "noto sans 10 pt" in kde neon is NOT suited for a specific use case? i want to see that unless i use a developer decided font, i would be totally off base, i would miss the plot, i would read garbage, etc etc.
    • oefrha 5y ago
      Yes, Microsoft does do a shit job at fonts. Many Android vendors too. Don’t even get me started on Linux.
      • 2Gkashmiri 5y ago
        cool. why don't you kindly ask them to fix the fonts by a bug request instead of everyone just assuming the stuff is shit
  • lelandfe 5y ago
    And for that matter, let’s put the kibosh on the childish act of using colors as well
    • deleted 5y ago
      [deleted]
  • pville 5y ago
    Maybe it's time to bring back "Weaponized" Comic Sans: http://www.openbsd.org/papers/bsdcan14-libressl/mgp00025.html http://www.openbsd.org/papers/bsdcan14-libressl/mgp00025.htm...
• divbzero 5y ago
  The suggestion I like the most is 3.4) Use system fonts: body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; } Stack Overflow took this approach last year with the following font stack: [1] @ff-sans: system-ui, -apple-system, BlinkMacSystemFont, // San Francisco on macOS and iOS "Segoe UI", // Windows "Ubuntu", // Ubuntu "Roboto", "Noto Sans", "Droid Sans", // Chrome OS and Android with fallbacks sans-serif; // The final fallback for rendering in sans-serif. @ff-serif: Georgia, Cambria, "Times New Roman", Times, serif; @ff-mono: ui-monospace, // San Francisco Mono on macOS and iOS "Cascadia Mono", "Segoe UI Mono", // Newer Windows monospace fonts that are optionally installed. Most likely to be rendered in Consolas "Ubuntu Mono", // Ubuntu "Roboto Mono", // Chrome OS and Android Menlo, Monaco, Consolas, // A few sensible system font choices monospace; // The final fallback for rendering in monospace. [1]: https://meta.stackexchange.com/questions/364048/we-are-switching-to-system-fonts-on-may-10-2021 https://meta.stackexchange.com/questions/364048/we-are-switc...
  • thrdbndndn 5y ago
    >Stack Overflow took this approach last year Just to note, what you posted below isn't their final version, and for good reasons. Anyone that is interested about this please check the original post with update 1,2, and 3. On the other hand, I still failed to see the the advantage of such complex stack vs font-family: sans-serif; Why reinvent the wheel when you can just use this and it would use browser's default sans-serif font setting? Which users can define to whatever they want, system font or not.
    • divbzero 5y ago
      Thanks for pointing out Stack Overflow’s subsequent updates. They removed system-ui which, as you pointed out in the other comment, can cause problems for some OS languages: @ff-sans: -apple-system, BlinkMacSystemFont, // San Francisco on macOS and iOS "Segoe UI", // Windows "Liberation Sans", // Linux sans-serif; // The final fallback for rendering in sans-serif. @ff-serif: Georgia, Cambria, "Times New Roman", Times, serif; @ff-mono: ui-monospace, // San Francisco Mono on macOS and iOS "Cascadia Mono", "Segoe UI Mono", // Newer Windows monospace fonts that are optionally installed. Most likely to be rendered in Consolas "Liberation Mono", // Linux Menlo, Monaco, Consolas, // A few sensible system font choices monospace; // The final fallback for rendering in monospace. https://github.com/StackExchange/Stacks/pull/642/files https://github.com/StackExchange/Stacks/pull/642/files
• KronisLV 5y ago
  > 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 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-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?
  • nicbou 5y ago
    Fonts on my website add up to around 40kb. It barely makes a difference.
  • Aeolun 5y ago
    Heh, if I serve custom Japanese fonts we happily go into the megabyte range.
    • oefrha 5y ago
      That’s why you subset it when you have to use one. I’ve used CJK font subsets measured in single to double digit KBs in my own designs over the years, they’re fine. Don’t count on using a custom font for arbitrary text though.
      • 5y ago
• mattbee 5y ago
  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.
  • lelandfe 5y ago
    I’ve been meaning to build a PoC where you subset to the glyphs shown above the fold, inline, and then download the full font face at a low priority.
    • pshc 5y ago
      If fully automated, this would be quite slick.
    • amelius 5y ago
      You could inline a dummy font containing only the font metrics. Then replace it by the real font after the initial render.
      • necovek 5y ago
        I was going to suggest that too. Separate metrics files have already been done too (both with TeX in TFM files and Adobe/PostScript fonts in AFM/PFM files), so you wouldn't even have to invent a new file format. Or you could simply use a regular font with no glyph curve data. I am a bit disappointed this is not covered in the original post, and that no effort is being put in W3C to make that easy and viable.
        • amelius 5y ago
          > I am a bit disappointed this is not covered in the original post, and that no effort is being put in W3C to make that easy and viable. Yes. What would be interesting is if you could use an a-priori available font (system font), and combine it with a website-provided font metrics file. That way, you can render visible text immediately, and then later render the correct font without layout change.
• lelandfe 5y ago
  > Preloaded fonts delay main JS bundle Am I crazy or does that waterfall pretty clearly show nothing of the sort? When using http/2, a reasonable amount of preloaded assets won’t block anything else in the critical path…
• jurnalanas 5y ago
  You can use a library to take care a lot of FOUT versus FOIT experience. Face Observer (https://fontfaceobserver.com 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);
  • account42 5y ago
    If you do this please make sure to not hide things when scripts are disabled.
• wakeupcall 5y ago
  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.
  • vladvasiliu 5y ago
    > 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. This. Plus sometimes, for some reason, they choose hair-thin versions of fonts that are a pain to read even on (non mac) retina displays.
• togaen 5y ago
  Easy: don’t use them. They are a waste of time anyway. I promise you your users care 0% about whether your font is “just right” or not.
  • NaughtyShiba 5y ago
    It’s not about “just right”. It’s about branding.
    • togaen 5y ago
      That’s just another thing your users don’t care about.
      • Gigachad 5y ago
        Spoken like a true hacker news user. Absolutely zero understanding outside of their field but still confidently parades their opinion. Turns out that branding and consistency are actually very important.
        • hexo 5y ago
          Turns out with modern technologies it is never ever consistent, nor nice, fast, ergonomic. Heck, sometimes not even usable at all.
        • gwn1 5y ago
          Having a consistent logo is great and SVG is a good choice for that But for things like the body font on a website, nobody really cares except the company's designers
          • wtallis 5y ago
            The worst case of this kind of designer hubris I've seen is Qualcomm's website, which includes a webfont that's completely pedestrian except that it makes every "Q" look like the Q in the company logo — which is actually a pretty poor stylistic fit for the rest of that font.
• tacone 5y ago
  If OS makers reached some kind of agreement to incorporate the most used 20 web fonts in their OS, 99% of this madness would be gone.
  • Macha 5y ago
    This was pretty much done with the original web safe fonts, but fonts have an element of fashion to it and moved on and pretty much all of them are seen as dated by the people who do specifically pick fonts.
  • cblconfederate 5y ago
    And use the same 120 fonts in our website? What are we, plebs? Plz download this 45mb font that we made this morning
• hawski 5y ago
  How to avoid layout shifts caused by CSS loading. How to avoid layout shifts caused by images. How to avoid layout shifts caused by ads. How to avoid layout shifts caused by DOM changes. It is funny how as many things moved to web we still have those basic issues, that would be considered show stopper errors in a desktop app. Sometimes I would like for the browser to keep the state from 0.2 second ago when I decided to tap or click and do something like nothing did change in this time.
  • dmitryminkovsky 5y ago
    > How to avoid layout shifts caused by images. And it’s funny how the state of the art way to address these issues is usually some absurd hack. Like in the case of images, setting the height to 0 and using padding to achieve a stable height: https://nikitahl.com/css-aspect-ratio https://nikitahl.com/css-aspect-ratio.
    • megous 5y ago
      Normal way to achieve img to have a size before the resource in src loads is to set width/height attributes to the native size of the resource that will be loaded (because you have to tell the browser size of an image somehow), and if you want to scale it with aspect ratio preserved you just use min/max-width/height in css to fit it to whatever size you need.
      • dmitryminkovsky 5y ago
        You’d think, right? But I tried that approach, and I don’t remember what the issues were but there were problems. Unless I was doing something wrong. Either way, yes, you need the dimensions ahead of time, which is reasonable and not my gripe.
        • lelandfe 5y ago
          > Unless I was doing something wrong Probably this, that approach is very standardized now across the major browsers. I worked at a web agency until last year, and led projects to inline image height/width values for 4 large companies. Huge reduction in CLS and permits you to lazyload without fear of layout shifts. `aspect-ratio` hadn't landed in iOS Safari at that point, but you can do that instead now. Identical behavior.
• jesprenj 5y ago
  Ironically, this website's heading shifted it's layout after the new font loaded (:
• logifail 5y ago
  With the default settings I find this web page almost impossible to read (with my glasses on). The font is [too] small and the contrast is poor. "Avoiding layout shifts caused by web fonts" is a great topic. "Readability" would be another one.
• donatj 5y ago
  1. Don’t use web fonts. 2. There is no step 2 They just slow the web down and often make things less legible in the name of style.
• cblconfederate 5y ago
  Just use system fonts. Except on android, it's only roboto And do use verdana, it's the most readable font. Admit it, you like it here