DRAFT New Pattern: Enhance Fonts As They Load

[sergeychernyshev]

Custom web fonts are great artistic tool and can help deliver best experience for the brand, however fonts need to be downloaded into the browser before they can be used to paint text on the screen.

Many techniques exist to optimize font delivery, but none of them fully eliminate the cost of downloading the fonts resulting in user experience issues including so called Flash of Invisible Text (FOIT) effectively hiding font-styled text on the page and causing potentially significant layout shifts and repaints once fonts load.

Using standard browser fonts in place of custom fonts while those load is a technique that help provide progressive enhancement and a good alternative to empty text.

WebPageTest report for pages following and not following the pattern:

• Success: http://www.webpagetest.org/result/...
• Failure: http://www.webpagetest.org/result/...

Existing blog posts, articles, videos

Links to successful implementations