Your new post is loading...
In 2010 Google launched Google Fonts and made custom web fonts accessible to the world. You had a custom typeface on your site with just a few lines of copy-and-pasted CSS.
index.html
<link href="https://fonts.googleapis.com/css?family=Bevan" rel="stylesheet"> index.css
body { font-family: 'Bevan', Georgia, serif; } Under the hood Google Fonts links to a stylesheet full of font-face declarations.
css?family=Bevan
/* latin */ @font-face { font-family: 'Bevan'; font-style: normal; font-weight: 400; src: local('Bevan Regular'), local('Bevan-Regular'), url(https://fonts.gstatic.com/s/bevan/v9/4iCj6KZ0a9NXjG8dWCvZtUSI.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } This setup prioritizes simplicity over performance. But it leads to a nasty problem on slow connections: FOIT.
Flash of Invisible Text (FOIT)
Most modern browsers will layout the page but wait for three seconds before rendering any text. If the custom font has loaded it will appear, if not the next available fallback font is rendered. This is known as FOIT. On a bad 3G connection this usually means three seconds of a site devoid of text.
Use WebPageTest for profiling
WebPageTest is the best free tool for profiling page load. It allows you to throttle connections and use real mobile devices. For this study, we'll use the "Easy" profile, which is a slow 3G connection. The results WebPageTest provides are comprehensive but sometimes hard to understand.
(...)
A non-exhaustive check list to loading fonts