WEBフォントを自鯖に入れてみて初めて分かったこと

WEBフォントのイメージと言えば「重い」。
これは、どこかで見かけた言葉がそのまま頭に残っていたものです。

実際に使ったことがないまま、なんとなく「WEBフォントは重いもの」と思い込んでいました。

この記事では今まで使うことが無かったWEBフォントを実際に使ってみて分かったことを挙げようと思います。

切っ掛けは自作のWEBツールでWEBフォントが使いたい衝動

自分はサイトスピード狂……と言いたくなるくらい、サイトの表示速度を気にする方です。
あくまでも、気にするだけです。

そんな自分が「使えば重くなる」と頭に植え付けられたWEBフォントを使いたくなった切っ掛けは、サイトで公開しているWEBツールが原因にあります。

アイキャッチメーカーなるものを自分のサイトで公開しているのですが、そのツールでは背景画像に文字を入れる機能をつけるのですが、そこでニコ文字シリーズを使いたかったのです。

ニコ文字シリーズ自体は無料でダウンロードができるフリーフォントです。ダウンロードをしたフォントは自鯖に入れて使います。
今まで1ミリも使った事がないのに「WEBフォントはサイトを重くする」の言葉を鵜吞みにしていたので、そこでいったん躊躇します。

ニコ文字シリーズの他にも、使ってみたいWEBフォントはたくさんありました。
ただ、1つのページで複数のWEBフォントを使うとなると、それだけでサイトが重くなりそうだと感じていました。

くどいようですが、この時点ではWEBフォントを実際に使った経験はありませんでした。

WEBツールの第2段を作るきっかけでWEBフォントを使ってみる

アイキャッチメーカーの改良版を作ることになり、再びWEBフォントを使いたくなります。今度はオブジェクトキャッシュをコントロールするためにAPCu Managerというプラグインを入れることを前提に動き出します。

内心ウキウキしながらニコ文字をダウンロードします。

みんな大好きなPageSpeed Insightsで、フォントファイルの読み込みがサイトの表示速度に影響していると指摘されることがあります。
今回使いたかったフォントは、非圧縮（無圧縮）のTTF形式で配布されていました。Web上でそのまま扱うには容量が大きくなりやすいため、より軽く配信しやすいWOFF2形式へ変換して使うことにしました。

WEBフォントを使ったことが無いのにやけに詳しいのは血眼になって調べたからです。
コンバート、つまり変換するには有難いことに無償でサービスを提供しているサイトがあるので、そこを使います。

ここで一旦、コードのみで完結するGoogleフォントの使い方を振り返りたいと思います。

WEBフォントが使えなければ、Googleフォントを使えば良いじゃない

GoogleフォントもWEBフォントです。ここで言っているのは、フォントファイルを自分のサーバーに置いて読み込むか、Google Fontsから配信されるフォントを外部読み込みで使うかの違いです。

自鯖を用意せずにGoogleフォントの一般的な使い方は、Google Fontsで使いたいフォントを決めてから専用コードをサイトに埋め込みます。

M PLUS 1pを使う場合。

Google Fontsから使いたいフォントを探し、Get font と書かれているボタンを選択します。
画面が切り替わり、「Get embed code」か「Download」の二択があるので「Get embed code」を選択します。

下記のコードが表示されるので。それをサイトのHTMLが効く場所に埋め込みます。

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=M+PLUS+1p&display=swap" rel="stylesheet">

こちらはM PLUS 1pを使う為のCSSです。CSSが効く場所に埋め込みます。

.m-plus-1p-regular {
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 400;
  font-style: normal;
}

Google Fontsを使うためのコード解説

まずHTMLのGoogle Fontsを最適に読み込むための3行コードの1行目から解説します。

このコードはGoogleのサーバー（API）との接続準備を事前に行います。
ブラウザがあらかじめ接続を済ませておくことで、フォント情報の取得を早めます。

<link rel="preconnect" href="https://fonts.googleapis.com">

2行目。

実際のフォントファイルが置いてあるサーバーとの接続準備です。
Google Fontsは、設定（CSS）と中身（Fontファイル）の置き場所が分かれているため、ここでも事前に接続を確立して読み込み時間を短縮します。
crossoriginは、フォントが外部サイト扱いになるため、セキュリティ上のルールに従って接続するために必要です。

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

3行目。

「M PLUS 1p」というフォントを使うための設定ファイル（CSS）を読み込みます。
display=swapという指定により、フォントがダウンロードされるまでの間、代わりにパソコンに入っている標準フォントを表示させておき、準備ができ次第パッと切り替える（空白時間をなくす）処理を指示しています。

<link href="https://fonts.googleapis.com/css2?family=M+PLUS+1p&display=swap" rel="stylesheet">

事前読み込みという罠

これの何が罠かというと、1行目と2行目は、Google Fontsで使う外部サーバーへの「通路」を先に開いておく指定だということです。

通常、ブラウザはHTMLを読み進めて「あ、このサーバーのデータが必要だ」と気づいてから接続を始める。
preconnect を使うと、中身が何であるかに関わらず、「とりあえずこのドメインと今すぐ接続しておけ」と強制します。

実際にページで使うフォントが一つだけだったとしても、複数のフォントに対して事前準備をしていれば、その分だけ通信のリソースを消費します。

するとどうなるか。自分の場合、PageSpeed Insightsのパフォーマンススコアが60台まで下がりました。
つまり、WEBフォントそのものが悪いというより、使わないフォントまで事前準備してしまうと、ページに余計な負担がかかる状態になります。

WEBツールで使うフォントはプルダウンを使用していて、実際に選択して使用するフォントは一つのみ。
しかし、複数のフォントを接続状態にしておくという事は、

右手にHBの鉛筆、さらに左手に2Bの鉛筆を握り、口には2Hの鉛筆を咥え、また両足も使って鉛筆を持っている状態。

「それ、いつ使うの？」という鉛筆の重みで、肝心のノートを広げる手が止まっているようなものです。

そんな使い方をしたら、そりゃあ「WEBフォントを使ったらサイトは重くなる」になるよね。

自鯖でフォントを使う場合

自分の場合は、自作のWEBツールでプルダウンによる選択式のWEBフォントを使います。
WEBツール内に複数のフォントを用意していても、実際に読み込むのは選択されたフォントだけです。

これは、display: none;で非表示にしているだけの状態とは違います。ページ上には見えていなくても裏で読み込んでいるのではなく、選択して使用するときに必要なフォントを読み込む形にしています。

ですので、このように選択されたフォントだけを読み込む形にしておけば、複数のWEBフォントをWEBツールに設定していたとしても、ページにかかるフォントの負荷はその時に使用する1種類分に抑えられます。

ただし、これは「選択されたフォントだけを読み込む」作りにしている場合の話です。CSSやJavaScript、preloadなどで複数のフォントを最初から読み込ませている場合は、その分だけ読み込みの負荷が増えます。使う前から準備してしまうことで、必要以上の読み込みが発生する。ここが、事前読み込みの罠だと感じました。

WEBフォントの使いかたを変えたPSIスコア

上記の画像は、実際に標準フォント6種類、自鯖で用意したWEBフォント7種類を設定したWEBツールのページを測定したものです。
複数のフォントを用意していても、必要なフォントだけを読み込む形にしたことで、PageSpeed Insightsの数値が大きく改善し、正直かなり驚きました。

もっと早くに使ってみたら良かったと、思わずにはいられない出来事ではありました。
実際にやってみると、準備そのものは思っていたよりも難しくありませんでした。

ダウンロードしたTTFファイルをWOFF2ファイルに変換し、サーバー上の子テーマ内に「font」フォルダを作って、その中にWOFF2ファイルを置く。
自鯖でWEBフォントを使うための下準備としては、ここまでが最初の作業になります。

WEBフォントを自鯖に入れてみて初めて分かったこと、それはWEBフォントは素敵だということです。
製作者の癖が文字という形に現れ、いつまでも残っていくことを思うと、フォントとはとても感慨深い作品だと感じました。

おまけ｜font-familyを使ったフォントの書き方から学ぶルール

フォントを囲むシングルクォーテーションとダブルクォーテーション

通常のCSSファイルの場合、シングルかダブルの好きな方を1種類だけ使います。

• font-family: “M PLUS 1p”, sans-serif; （ダブルのみ）
• font-family: ‘M PLUS 1p’, sans-serif; （シングルのみ）

どちらでも正解です。ただ、自分は基本的にダブルクォーテーションで統一しています。ていうか、ダブルクォーテーションばかりを使います。シングルクォーテーションは小さくて見逃しやすいので、できるだけ使いたくありません。

自分が使いやすいと感じた書き分け

• CSSファイル内: ダブルクォーテーションで囲む
  font-family: “M PLUS 1p”, sans-serif;
• HTMLのstyle属性内: 外がダブルなら、中はシングル
  style=”font-family: ‘M PLUS 1p’;”

Q：sans-serifは囲まない？これはゴシックだよね？

A：はい、sans-serif は囲みません。 そして、sans-serifは「ゴシック体（サンセリフ体）」を指します。

Q：M PLUS 1pはフォント名でもあるけど、 font-familyというプロパティの値でもあるよね？

A：その通り。「名前（名詞）」としての役割と、「設定値（値）」としての役割を両方持っています。

「値」としてのM PLUS 1p

CSSのプロパティには、color: red; のように「決まった単語」を入れるものと、font-family のように「名前」を入れるものがあります。

font-family というプロパティ（項目）に対して、"M PLUS 1p" というバリュー（値）を入れています。

なぜ「値」なのにクォーテーションで囲むのか

キーワード値（システムが決めた言葉）

• sans-serif や bold など。これらはCSS側で意味が決まっているキーワードなので、クォーテーションでは囲みません。

文字列値（ユーザーやメーカーが決めた名前）

• "M PLUS 1p" や "Noto Sans JP" など。これらは「固有の名詞」なので、ブラウザに「ここからここが名前だよ」と教えるためにクォーテーションで囲みます。

整理します。

• プロパティ名: font-family（フォントの種類を決めるよ！という宣言）
• 値（固有）: "M PLUS 1p"（具体的なフォントの指名）
• 値（予備）: sans-serif（もしもの時の系統指定）

これらをセットにして font-family: "M PLUS 1p", sans-serif; という一つの設定が完成します。

WEBフォントは、ただ使えば重くなるものではなく、形式や読み込み方、使うタイミングによって印象が大きく変わるものだと感じました。

これにて「WEBフォントを自鯖に入れてみて初めて分かったこと」を終わりたいと思います。