openpolitics.com

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.