最も簡単に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 Loade がよさそうです.