23

Ask DN: How are you avoiding the flickering effect on web fonts?

over 6 years ago from , Chief Everything Officer - ARSHTec

I love web fonts, so do you, I'm sure. But I hate the flickering effect it creates while it renders. I tried to use CSS transitions to kind of fade the

element in, even though it works, I still feel that it may not be the right approach to solving this issue.

Anyone used any other creative ways to get around this issue? I still wonder why this effect still exists, even in this day and age of super browsers?

19 comments

  • Marc EdwardsMarc Edwards, over 6 years ago
    1. Self hosted on a fast server (the same server you use for your website).
    2. Don’t use too many fonts.
    3. Don’t use too many font variations.
    4. Only load the fonts and variations you actually need.

    That won’t stop the issue, but it’ll definitely reduce it a lot.

    14 points
  • James GreigJames Greig, over 6 years ago

    System fonts.

    9 points
    • Matthew O'ConnorMatthew O'Connor, over 6 years ago

      100% this.

      My go to for body copy is now: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"

      It is the most gracious way of falling back to cover most system fonts.

      3 points
      • Diego LafuenteDiego Lafuente, over 6 years ago

        I am doing a project using this, he, he. I love it. Everything loads son fast.

        0 points
      • Askar HussainAskar Hussain, over 6 years ago

        That's a lot of variations in terms of font varieties. I'm sure Segoe UI and Roboto vary a lot in terms of their widths and spacing and designing for both would be a challenge, and that's the reason I went with one web font (actually 2, one for titles and one for the content) for all the platforms.

        0 points
        • Matthew O'ConnorMatthew O'Connor, over 6 years ago

          So generally if I want to brand a simple page I would use one @fontface for titles and then use this fontstack for body. With the web being responsive it is hard to design so specifically with type (as you get outliers and other annoyances as you scale the page), so I just try to get it looking the best I can possibly on the system I'm on and then see if the design looks look acceptable on other systems as well (generally they do).

          0 points
      • Matthew Tso, over 6 years ago

        I was overjoyed when I found that github was using this strategy.

        0 points
  • M. AppelmanM. Appelman, over 6 years ago

    It's somewhat complicated, this is a great article about it: https://www.zachleat.com/web/comprehensive-webfonts/

    6 points
    • Dirk HCM van BoxtelDirk HCM van Boxtel, over 6 years ago

      There's some great stuff here, even though it's full of acronyms that should really have their explanation in a hover for newbies. Assuming everyone knows them - or that everyone reads every single article this person writes entirely - is a great way to lose readers. And this stuff is important, so I'd love to see this become wide-spread.

      0 points
  • Luke Bussey, over 6 years ago

    If you are using TypeKit which is notorious for FOUT then use this: https://github.com/morris/typekit-cache

    3 points
    • Askar HussainAskar Hussain, over 6 years ago

      I really would like to use this but it has a loud warning about possibly violating Typekit's policy.

      1 point
      • Julian LengfelderJulian Lengfelder, over 6 years ago (edited over 6 years ago )

        I highly recommend the webfontloader, which is codeveloped by Google and Typekit.

        No preloading as far as I am aware of. But it handles everything else really well.

        1 point
  • Thomas Michael SemmlerThomas Michael Semmler, over 6 years ago

    First, is it FOUT or FOIT? If you need more control over the way your webfonts are loaded, you can try out https://fontfaceobserver.com/.

    But we should not forget, that FOUT is actually a practical thing. Imagine the whole site would wait to render until your webfont is loaded? Not so good. Users care about your content first. You should however not forget to still apply fallback in your font-family rules, one of them can be system fonts, if that suits your visual design.

    Just a reminder, that this is a problem not yet solved by standards to come. There are many workarounds, all of them have trade offs. You could even base64 encode your font and inline it. That would make the file huge but would prevent your fout,

    2 points
  • Gavin AnthonyGavin Anthony, over 6 years ago
    • Font preloading can really increase load times: <link rel="preload" href="font.woff2">
    • Host the font file on your own site if you can. If it's hosted on your own server, you can leverage the browser cache with far future expire headers.
    • Gzip your css/font files. I'd recommend doing this on all text-based assets, too.
    2 points
    • Askar HussainAskar Hussain, over 6 years ago

      I thought about font preloading but that would require purchasing those fonts to be self hosted (which could add up if you have multiple variations). If you are on a budget (bootstrapped) Typekit comes in handy in terms of price but not in terms of UX (with those ugly flickerings).

      0 points
  • Wes OudshoornWes Oudshoorn, over 6 years ago

    There is an excellent talk from Fronteers in Amsterdam last spring, about this subject. You can watch it here. There is even a transcript.

    https://fronteers.nl/congres/2016-spring/sessions/web-fonts-performance-by-bram-stein

    1 point
  • Ryan Townsend, over 6 years ago

    This may not be the very latest practice but I follow what Zachleat calls "Critical FOFT with data-uri" (https://www.zachleat.com/web/comprehensive-webfonts/#critical-foft-data-uri)...

    I embed the normal weight/style of my font in my inline CSS as a data-uri, this allows the browser to render the majority of the text properly, rendering faux italic / non-normal weights using this base font where necessary.

    Then I asynchronously load the rest of my CSS, which contains url-based references to the specific weights & styles (e.g. italic, bold, light), causing the browser to repaint with the proper font.

    If you have a server/CDN supporting HTTP/2 (most popular CDNs support this now) you could push those files, defeating the need for inline CSS (or data-uri included fonts) and simply reference them as normal in your code.

    In future, the ultimate solution, once browsers catch up, would be to combine font-display: swap with HTTP/2 pushing of the fonts.

    1 point
  • Jason Pamental, over 6 years ago

    I've been writing & speaking about this sort of issue for years - and so far the best performance I've found is combining restraint in the number of fonts used in the first place (but I always use them for body copy and headings) with a combination of FontFaceObserver and a session storage trick that virtually eliminates that flicker redraw on subsequent pages (a big hat tip to Zach Leatherman there)

    You can get a sample project from the code I've used in workshops recently on github: http://GitHub.com/jpamental/rwt-workshop

    0 points
  • Ale UrrutiaAle Urrutia, over 6 years ago

    I remember solving FOUT years ago with some of Paul Irish solutions. Currently i don't use any of those, but as others recommended here, I use just one or two non-system fonts and provide fallback options.

    0 points