フリーフォントをWebフォント化！サブセット化してファイルサイズを軽量化する方法

Webサイトでオリジナルのフォントを使用する方法のひとつに、サーバーにフォントファイルを設置し、Webフォントとして読み込む方法があります。

ただし、日本語フォントは多くの文字を収録しているため、そのままWebフォントとして使用するとファイルサイズが大きくなりやすいという問題があります。

そこで活用したいのが「サブセット化」です。

この記事では、フリーフォントをサブセット化してファイルサイズを軽量化し、Webフォントとしてサイトに適用するまでの手順を紹介します。

サブセット化とは

サブセット化とは、フォントに含まれている文字のうち、Webサイトで使用しない文字を削除することです。

日本語フォントには、漢字・ひらがな・カタカナ・英数字・記号など、非常に多くの文字が収録されています。

Webサイトで使用する文字が限られている場合、フォントに含まれるすべての文字を読み込む必要はありません。

使用する文字だけを残してフォントファイルを軽量化することで、Webフォントの読み込み負荷を抑えられます。

特に日本語フォントはファイルサイズが大きくなりやすいため、サブセット化が効果的です。

サブセット化の手順

1．フォントを用意する

まず、サブセット化するフォントを用意します。

フリーフォントを使用する場合は、Webサイトでの利用や改変、Webフォントとしての利用が許可されているか、ライセンスを確認しましょう。

今回は「ロゴたいぷゴシック」を使用します。

2．サブセットフォントメーカーを用意する

今回は、無料で利用できる「サブセットフォントメーカー」を使用します。Windowsでフォントのサブセット化を行う際に利用できるツールです。

3．サブセットフォントメーカーでフォントをサブセット化する

サブセットフォントメーカーを起動し、フォントをサブセット化します。

① 作成元フォントファイルを指定

「作成元フォントファイル」に、サブセット化するフォントファイルを指定します。

② 作成後フォントファイルを指定

「作成後フォントファイル」に、サブセット化したフォントの保存場所とファイル名を指定します。

③ フォントに格納する文字を指定

サブセット化では、フォントに残したい文字を指定します。

例えば、以下のような文字を指定します。

• ひらがな
• カタカナ
• 英数字
• 記号
• Webサイト内で実際に使用する漢字

重要なのは、必要以上に多くの文字を残すのではなく、実際にWebサイトで使用する文字に絞り込むことです。

例えば、特定のページだけで使用するフォントであれば、そのページに表示される文字だけを対象にする方法もあります。

今回は、以下のような文字を指定します。
「常用漢字」「ひらがな」「カタカナ」「全角・半角英数字」「記号」
以下の文字列を「フォントに格納する文字」の入力欄に貼り付けます。

④ サブセット化を実行する

必要な文字を指定したら、「作成開始」などの実行ボタンをクリックしてサブセット化します。

サブセット化が完了すると、指定した保存先に軽量化されたフォントファイルが作成されます。

サブセット化前後のファイルサイズを比較する

サブセット化を行ったら、元のフォントとサブセット化後のフォントのファイルサイズを比較してみましょう。

フォントに含める文字数を減らすほど、基本的にファイルサイズも小さくなります。

ただし、必要な文字まで削除すると、Webページで使用している文字がフォントに含まれず、意図したフォントで表示されなくなることがあります。

サブセット化後は、必要な文字がすべて含まれていることを確認しましょう。

Webフォント用のWOFF2に変換する

フリーフォントには、.ttf や .otf などの形式が使われていることがあります。

Webサイトで使用する場合は、Webフォント向けの形式である「WOFF2」を利用するのが一般的です。

WOFF2はフォントデータを圧縮した形式で、Webでの利用に適しています。
そのため、現在はWebフォントを利用する場合、WOFF2を優先して使用するケースが多くなっています。

WOFF2への変換

TTFやOTFをWOFF2へ変換できるツールを利用します。

オンラインで利用できる変換サービスもありますが、フォントファイルを外部サービスへアップロードすることになるため、利用するサービスの規約や安全性を確認しましょう。

また、フォントのライセンスによっては、オンラインサービスへのアップロードや変換が制限されている場合があります。

変換後は、以下のようなファイルが作成されます。

07LogoTypeGothic7_subset.woff2

Webフォントをサイトに適用する

サブセット化とWOFF2への変換が完了したら、フォントファイルをWebサイトに配置します。

例えば、以下のようなディレクトリ構成にします。

font/
└── 07LogoTypeGothic7_subset.woff2

CSSでWebフォントを読み込む

@font-face を使用してフォントを読み込みます。

@font-face {
    font-family: 'LogoTypeGothic';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('./font/07LogoTypeGothic7_subset.woff2') format('woff2');
}

.font_ltg {
    font-family: 'LogoTypeGothic', sans-serif;
}

font-family の名前は任意に設定できます。

font-display: swap; を指定すると、Webフォントの読み込み中は代替フォントを表示し、フォントの読み込みが完了するとWebフォントへ切り替えることができます。

HTMLでWebフォントを適用する

あとは、Webフォントを適用したい要素にクラスを指定します。

<p class="font_ltg">Webフォントを適用したテキストです。</p>

これで、指定した要素にサブセット化したWebフォントが適用されます。

Webフォントのサブセット化で注意するポイント

使用する文字を削除しない

サブセット化で必要な文字まで削除すると、その文字だけ別のフォントで表示されることがあります。

サブセット化後は、実際のWebページを表示して、文字が正しく表示されるか確認しましょう。

フォントのライセンスを確認する

フリーフォントでも、利用規約はフォントごとに異なります。

特に以下の点を確認しましょう。

• 商用利用できるか
• Webフォントとして利用できるか
• フォントファイルを改変できるか
• サーバーへのアップロードが許可されているか
• 変換したフォントをWebサイトで利用・配布できるか

「フリー＝何をしても自由」という意味ではないため、必ずライセンスを確認してください。

まとめ

フリーフォントをWebフォントとして使用する場合は、サブセット化によってフォントファイルを軽量化できます。

今回の手順をまとめると、以下のとおりです。

1. Webフォントとして利用できるフォントを用意する
2. サブセットフォントメーカーで使用する文字だけを残す
3. TTF・OTFなどをWOFF2へ変換する
4. サーバーにフォントファイルを設置する
5. CSSの @font-face で読み込む
6. Webページで正しく表示されるか確認する

特に日本語フォントはファイルサイズが大きくなりやすいため、使用する文字を絞ってサブセット化することで、Webフォントの軽量化につながります。