Ways To Reduce Content Shifting On Page Load

Web Fonts Link

Fonts have different x-heights. Therefore, our fallback font and web font will take up a different amount of space.

Currently, one best practice for loading web fonts is to use the Font Face Observer script to detect when a font has loaded so that it can be applied in the CSS afterwards.

In this example, we are applying the webfont-loaded class to the htmlelement once the web font is ready to use.

<span class="token keyword">var</span> font <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">FontFaceObserver</span><span class="token punctuation">(</span><span class="token string">'Lato'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

font<span class="token punctuation">.</span><span class="token function">load</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>className <span class="token operator">+</span><span class="token operator">=</span> <span class="token string">" webfont-loaded"</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

In the CSS, we apply the web font once it has successfully loaded.

<span class="token selector">p </span><span class="token punctuation">{</span><span class="token property">font-family</span><span class="token punctuation">:</span> sans-serif<span class="token punctuation">;</span><span class="token punctuation">}</span>

<span class="token selector"><span class="token class">.webfont-loaded</span> p </span><span class="token punctuation">{</span><span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">'Lato'</span>, sans-serif<span class="token punctuation">;</span><span class="token punctuation">}</span>

When the web font finally finishes loading, we will notice a quick jump. To minimize this, we can modify the x-height of the fallback font to match the web font as closely as possible, thus reducing the jump.

How The World’s Most Beautiful Typeface Was Nearly Lost Forever

Typographer Tobias Frere-Jones says that to devote your life to type, more than anything else you need to be very, very patient. For him, this career was the rare intersection of two others he couldn’t choose between: writing and painting, equal parts logical and emotional. He says that everyone is affected by type, even if they’re not consciously aware of it.

.. “It’s a lot like what costume designers do in films, dressing the characters in ways that quietly tell us about their personality.”

.. While Cobden-Sanderson had expunged every mention of Walker from his journals, he never hid the whereabouts of the type. There were enough details to work out where he was standing on the bridge at night: a 5-metre radius where he’d be concealed from police, oncoming traffic, and Emery Walker’s window.

“I went down on to the riverbed and within 20 minutes I’d found three pieces of type,” says Green. “It was near where I thought it was, but over a hundred years it had been pushed maybe 20 yards.”

.. In total, they found 151 pieces.

.. He’s added a further 290 characters to Walker and Cobden-Sanderson’s 100, because you can’t sell a font in 2016 without the @ symbol.

New embed code for asynchronous font loading

Today we’re changing that. From now on, all new kits will asynchronously load fonts. This will significantly improve your website performance. However, it can also cause the browser to render content in a fallback font before your web fonts load. This so-called Flash Of Unstyled Text can be controlled by using the font events provided by Typekit. Using font events, you can choose either to hide your content, or to show fallback fonts while your web fonts are loading.