最も簡単にwebフォントの読み込みを遅延させる方法

web フォントは <head>タグ内で読み込むため、web ページのレンダリングを遅延させてしまいますが、デザイン面においてフォントは重要な要素です。

今回は Google Fonts を使用したフォントの読み込みを遅延させる方法を紹介します。ちなみに、最も簡単な方法なので、より良い方法は他にもたくさんあると思います。

弊ブログでもソースコードを記載しているページがありますが、これを通常のフォントで表示してしまうと 1, l, I の違いがわからない、といった問題が発生するので、見やすいようにフォントを変更しています。

しかし、ページ表示が遅いと離脱率が上昇するため、読み込みを遅延させたいと考えるわけです。読み込みの遅延は非同期読み込みと言われることもあります。

head タグ内の編集

まず、読み込むフォントファイルを <head>タグ内に追加します。ここでは例として Google Fonts の Roboto フォントを使うことにします。

<head>
  ...
  <link href="https://fonts.googleapis.com/css?family=Overpass+Mono" id="webfont">
</head>

通常のフォントを埋め込む処理では rel="stylesheet"を記述しますが、ここでは ID を指定するに留めます。

body タグ内の編集

PageSpeed Insights 等で求められるのは<head>タグ内での読み込みに時間がかからないことです。これはコンテンツの表示が <head>タグ内の処理を終了してから行われるからですが、今回の読み込み遅延はこれを利用しています。

(function () {
  var webfont = document.getElementById('webfont');
  webfont.rel = 'stylesheet';
})();

先ほど設定した ID を使って属性を後から変更することで、フォントを読み込ませます。

最後に

npm が使える環境であれば Web Font Loader がよさそうです。