openpolitics.com

Font Awesome#

Many people who use Font Awesome take the CSS file and place it in their header. The problem is that if you put this into your header, it becomes render-blocking as CSS is render-blocking. Instead, we take the following code and we move it down to our footer, right before the </body> tag.

<span class="token tag"><span class="token punctuation"><</span>link <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/fontawesome.min.css<span class="token punctuation">"</span></span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span><span class="token punctuation">>


</span></span>

Note: Doing this will result in FOUT, which is a flash of unstyled text.

Google Fonts#

The third issue is with our Google Fonts. By default, WordPress uses a hook called wp_enqueue_scripts that loads the font in your header. This automatically results in it becoming render-blocking. To fix this we install a free plugin called Disable Google Fonts. If you are using a custom theme this may vary slightly, or you can ask your theme developer how to disable Google Fonts.

We then include our Google Font with the following code in our footer, right before the </body> tag.

<span class="token tag"><span class="token punctuation"><</span>link <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>https://fonts.googleapis.com/css?family=Noto+Serif:400,400italic,700,700italic<span class="token punctuation">'</span></span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>stylesheet<span class="token punctuation">'</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>text/css<span class="token punctuation">'</span></span><span class="token punctuation">></span></span>

Note: Doing this will result in FOIT, which is a flash of invisible text.

You could also load your Google Fonts asynchronously by using Google’s Web Font Loader. Simply place the following code below in your footer.

<span class="token operator"><</span>script type<span class="token operator">=</span><span class="token string">"text/javascript"</span><span class="token operator">></span>
    WebFontConfig <span class="token operator">=</span> <span class="token punctuation">{</span>
        google<span class="token punctuation">:</span> <span class="token punctuation">{</span> families<span class="token punctuation">:</span> <span class="token punctuation">[</span> <span class="token string">'Noto+Serif:400,400italic,700,700italic'</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</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>
        <span class="token keyword">var</span> wf <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'script'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        wf<span class="token punctuation">.</span>src <span class="token operator">=</span> <span class="token string">'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'</span><span class="token punctuation">;</span>
        wf<span class="token punctuation">.</span>type <span class="token operator">=</span> <span class="token string">'text/javascript'</span><span class="token punctuation">;</span>
        wf<span class="token punctuation">.</span><span class="token keyword">async</span> <span class="token operator">=</span> <span class="token string">'true'</span><span class="token punctuation">;</span>
        <span class="token keyword">var</span> s <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span><span class="token string">'script'</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
        s<span class="token punctuation">.</span>parentNode<span class="token punctuation">.</span><span class="token function">insertBefore</span><span class="token punctuation">(</span>wf<span class="token punctuation">,</span> s<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span>