【Webフォント】サーバー上へフォントをアップロードして使う時の方法・注意点まとめ

近年は、Webフォントを使ったサイトデザインが主流になってきていますね。Webフォントを使うことによって、ユーザーの閲覧環境に影響されてしまうデバイスフォントとは違い、環境に依存せずにフォントを統一して表示させることができます。またデザイン性の高いフォントを使用できる為、サイト全体のクオリティを高めてくれます。

Webフォントの使い方は2パターン

Google FontsやTypeSquareなどのWebフォント配信サービスを使う

代表的なのはやっぱりGoogle Fonts。すでにWebサーバー上にあるフォントを使用できる為お手軽。ただCDN経由で使う際にはサブセット化はされていないので、読み込み速度が遅くなるというデメリットも。モリサワが提供しているTypeSquareだとサブセット配信もできるらしいです！ただ月額課金制で、サイトのPVにより料金が変わってきます。

自分でフォントをサーバーへアップロードして使う「セルフホスティング」

少々手間はかかりますが、やはりランニングコストがかからないといったメリットがあります。フォントのサブセット化もできます。またWebフォント配信サービスを使った場合、別のドメインからフォントを探してくる為、サイトのパフォーマンス低下に繋がってしまいますが、セルフホストすることでその問題をクリアすることができます。
またWebフォント配信サービスは提供終了や廃止になる可能性がありますが、セルフホスティングの場合サイトが稼働する限り心配ありません。

サブセット化って何？

日本語フォントは、JIS第一標準水準漢字（2965字）、JIS第二標準水準漢字（3390字）、ひらがな、カタカナなど膨大にあります。読み込みに時間がかかってしまうのを防ぐ為、使用するフォントだけを集約して読み込ませることで、サイトの軽量化を図ります。

わたしは基本的に無料のものしか使ってません。サイト作って納品することを考えると契約も面倒になってくるし、何よりランニングコストがかかるものは避けたいからです。お客さんが希望しているとか、よっぽどのことがない限りフォントは無料がいいと思います。

今回は、フォントをセルフホスティングする場合の注意点をまとめていきます。

まずフォントのライセンスを確認

使用したいフォントがどのようなライセンスで管理されているか確認する必要があります。

今回はGoogle Fontsが提供する和文フォント、Noto Serif Japaneseを使用しました。このフォントの場合はSIL Open Font License（SILオープンフォントライセンス）のもと管理されていて、サーバーへのアップやファイル形式の変更OKなフォントです。SILオープンフォントライセンスについては、こちらの記事が分かりやすかったです。
「SILオープンフォントライセンス」って何？という方のためのざっくり解説

ロゴの制作などでもそうですが、使用するフォントはまずライセンスを確認しましょう。でないと著作権侵害で損害賠償になってしまうケースも。

フォントをサブセット化する

フォントの用途がライセンスに問題ないのを確認できたらダウンロード。フォントをサブセット化していきます。ただ、ブログのように、使う文字が今後増えていく可能性があるコンテンツには不向きかもしれません。

わたしは武蔵システムのサブセットフォントメーカーを使用しました。

「フォントに格納する文字」については、使う文字を直接入力する必要があります。こちらのサイトでまとめてくれていました。ありがたい！
日本語WEBフォントをサブセット化する際の参考文字列一覧 | U-618WEB

ちなみにNoto Serif Japanese（Regular）だと、JIS第1水準＋JIS第2水準＋その他でも6.2MBから2.3MBへ容量削減できました。

フォントをWebフォント形式へ変換する

ダウンロード後のファイル形式はotfになっているので、Webフォントとして使えるよう、ファイル形式を変換します。

変換するファイル形式は、以下の3つで基本的に問題ないです。

.woff2（Web Open Font Format 2.0）	IE以外のモダンブラウザ対応。woffのバージョンアップで圧縮率が高い。
.woff（Web Open Font Format）	woff2がサポートされていないブラウザ向けですが、近頃はほとんどサポートされているので必要ないかも。
.eot（Embedded OpenType）	IE対策。

サブセットフォントメーカー同様、武蔵システムのWOFFコンバータを使用。ちなみにotfからeotへの変換はWOFFコンバータではできないので、こちらのOTFからEOTへのコンバーターを使いました。

以上でWebフォントの準備が整いました！次はcssでフォントを読み込ませていきます。

CSSでの指定方法

まず、フォントファイルを読みこむ指定を記述をします。

@font-face {
	font-family: "NotoSerifJP";/*要素に指定するときに使うフォント名*/
	src:url(/fonts/NotoSerifJP-Medium.woff2) format('woff2'),/*先に記述するほど優先度高*/
	url(/fonts/NotoSerifJP-Medium.woff) format('woff'),
	url(/fonts/NotoSerifJP-Medium.eot) format('embedded-opentype');
	font-display: swap;
}

@font-faceには「font-display:swap;」をつける

上記のcssの6行目に、「font-display:swap;」といった指定がされています。これはWebフォントが読み込まれるまでの時間、代替フォントでテキストを表示するといった意味になります。この指定があるかないかで、コンテンツの表示速度はだいぶ変わります。ただ、Webフォントが表示されたときに大きなレイアウト変更が起きないように、代替フォントは近いものを選んでおきましょう。

body{
	font-family:"NotoSerifJP","Yu Mincho","Hiragino Mincho ProN","MS Mincho",serif;
	font-size:16px;
	color:#060603;
}

このように指定した場合、NotoSerifJPが読み込まれるまでの間、後述しているデバイスフォントが代替フォントになります。

font-familyの指定いつも悩みます( ´△｀)同じくお悩みの方は下記参考にしてください。
【2021年版】font-familyの正しい指定方法・タイプ別おすすめフォント設定例

フォントをプリロードさせる

Webフォントは、そのフォントが指定されているコンテンツのロードが始まったタイミングで読み込まれます。なので事前に先読みさせておけば、表示速度を短縮できるといった技です。

<html lang="ja">
<head>
<link rel="preload" as="font" href="/fonts/NotoSerifJP-Medium.woff2" type="font/woff2" crossorigin>
</head>

このように、htmlの<head>内に記述します。最後の「crossorigin」は記述漏れがあるとプリロードが実行されないので注意。また、ファイル形式はほとんどのブラウザがサポートするWOFF2にしておきます。

最後に

綺麗に見せる為にせっかくWebフォントを使っても、サイトの読み込み速度が遅いと、ユーザーの直帰率をあげてしまう原因の一つになってしまいます。なので読み込み速度対策もきちんとしておくことがとても大切です。