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

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

使ってもいないのに誰かの言葉をそのまま鵜吞みにした悪い例ですね。

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

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

自分はサイトスピード狂と言いますか、極度にサイト表示を気にする面があります。
あくまでも、気にするだけです。

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

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

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

ニコ文字シリーズの他にも使用したいWEBフォントは沢山ありました。1つのページに複数のWEBフォント。
確実にサイトを重くする。

くどいようですが、WEBフォントを使った事は生涯一度もありません。

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

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

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

みんな大好きなPageSpeed Insightsでwoffがサイトを重くしていると指摘されることがあります。
フォントは非圧縮（無圧縮）のTTFでダウンロードされます。これを最高効率のWOFF2（Brotli圧縮）へコンバートします。

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

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

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

GoogleフォントもWEBフォントです。ここで言ってるのは自鯖にフォントを入れて使うか、それが嫌ならGoogleからフォントが入っているサーバーを間借りして使うかの二択です。

自鯖を用意せずに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">

事前読み込みという罠

これの何が罠かというと、一行目と二行目が大雑把にサーバーの通路を広げているということ。

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

設定したページでフォントを一つしか使っていなくても、複数のフォントの使う事前準備をした場合は、その分の通信のリソースを消費します。

するとどうなるか。PageSpeed Insightsのパフォーマンススコアがあり得ないくらいに下がる。
つまり、WEBフォントを使うとサイトに負担がかかる状態になる。
何故そんな事が言えるのか、それは実際に自分でやってみて（やらかして）パフォーマンスのスコアが60台になったからです。

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

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

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

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

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

自分の場合は自作のWEBツールで、しかもプルダウンを使った選択式でWEBフォントを使います。
いくらそのWEBツールに複数のフォントを設定していても、使用するのは選択した一つのみ。

これはdisplay: noneのようなページで読み込んでいるけど、非表示にしている状態ではなく、選択して使用している時にのみフォントを読み込んでいる状態です。

ですので、複数のWEBフォントをWEBツールに設定していたとしても、フォントがページに与える負荷はその時に使用するフォント1種類分しかありません。

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

上記の画像は、実際に標準フォント6、自鯖を使ったWEBフォント7を設定したWEBツールのページを測定したものです。
正直、数値が跳ね上がり過ぎて驚きました。

もっと早くに使ってみたら良かったと、思わずにはいられない出来事ではありました。
やってみると簡単な作業です。

ダウンロードをした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 など。これらは「命令」に近いので、囲みません。

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

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

整理します。

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

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

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