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

over 6 years ago from Askar Hussain, Chief Everything Officer - ARSHTec

  • 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" (

    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