フリーフォントをwebフォント化する方法！サブセット化の手順とCSS事例
2024.12.06
Webフォントサービスはデザイン性に優れているフォントが簡単に使える反面、種類が少なくて物足りない…と思っていませんか？そこで本記事では、和文でも種類が豊富な商用可能フリーフォントをサーバーにアップロードして、Webフォント化する方法についてまとめてみました。
フリーフォントをWebフォント化するメリット
確かに、無料のGoogle Fontsや有料のTypeSquareといったWebフォントサービスなら、誰でも簡単にWebフォントが扱えます。
にもかかわらず、なぜ多くのWebデザイナーがわざわざサーバーにWebフォントをアップロードする方法を選択しているのでしょうか。
その理由は、サーバーにアップロードしたWebフォントには下記のようなメリットがあるからです。
- フォントの選択肢が多い
- ユニークなフォントによって、サイト全体のデザインが差別化できる
- 画像スライスで表示するよりも、SEOに有利
- テキストとして使用できるため、簡単に修正できる
- 適切な位置で改行できる分、レスポンシブ対応が簡単
- 拡大しても綺麗に表示される
初心者のブログとWebデザイナーが作成したプロ仕様のサイトでは、どうしても見た目の印象に差が生じてしまいます。
しかし、商用可能なフリーフォントをWebフォント化することで、たとえ個人のブログであってもインパクト重視のサイト作りが手軽に目指せるのです。
フリーフォントをWebフォント化するデメリット
フリーフォントをWebフォント化する場合、デメリットとして下記の3点が挙げられます。
- ライセンスでWebフォント化が認められていないと使えない
- Webフォントサービスに比べると、作業に手間がかかる
- 種類が多すぎると読み込み速度が遅くなる
サーバーから読み込んで表示するWebフォントは、どうしても重くなりがちです。
後述するサブセット化によって軽量化は図れるものの、コンテンツ全文に使用するよりもタイトルや見出しなど限定的に反映させた方が良いでしょう。
フリーフォントをアップロードしてWebフォント化する手順
ここからは、お気に入りのフリーフォントを自前のサーバー内にアップロードして、Webフォント化する手順について見ていきましょう。
ちなみに、フリーフォントファイルをWebサーバーやストレージにアップロードして使用することを、専門用語では「セルフホスティング」と言います。
Webフォント化OKのフリーフォントを用意する
まずは、webフォント化が認められているフリーフォントを準備しましょう。
ここで問題となるのが、全てのフリーフォントがWebフォント化（セルフホスティング）できるとは限らないという点です。
確かに、フリーフォントであればライセンスを購入しなくても無料でダウンロードできますが、だからと言って「用途」や「使用方法」を問わずユーザーが自由に使える訳ではありません。
フリーフォントをwebフォント化して自サイトに表示させる場合、少なくとも下記の3点をクリアしている書体を選んだ方が安心です。
▼ライセンスのチェックポイント
- 再配布：インターネット上で公開できるか？
- 改変：ファイル形式の変換、およびサブセット化が認められているか？
- 商法利用：営利目的で使用できるか？
ちなみに、下記ライセンスの内1つでも適用されているフリーフォントであれば、Webフォントとしての利用が可能です。
▼Webフォントとして利用可能なライセンス
- SIL Open Font License（OFL）：オープンソースライセンス
- Apache License 2.0：ソフトウェア向けオープンソースライセンス
- M+ FONT LICENSE：M+ FONT独自のライセンス
今回は、和文フォントが豊富に用意されている「もじワク研究」から選んだ「トガリテ」を使ってWeフォント化に挑戦してみます。
画面下部にある「概要」と「ライセンス詳細」を確認し、「ダウンロード」をクリックして圧縮ファイルを解凍しておきましょう。
サブセット化でファイルサイズを軽量化する
文字数が限られている欧文フォントと比べ、漢字・ひらがな・カタカナなど種類が多い和文フォントはファイルサイズが大きい分、読み込み速度が遅くなるのが難点。
そこで、できるだけファイルサイズが小さくなるよう、使用頻度が高い文字だけを抜き出す「サブセット化」を行います。
フリーフォントの種類によっては、1／3以下まで軽量化が可能です。
また、Webフォントとして使用するにはサブセット化の完了後、ファイル形式を変換する必要があります。
あらかじめ、下記2種類のフリーソフトをインストールしておきましょう。
▼使用するフリーソフト（Win・Mac両対応）
インストールしたサブセットフォントメーカーを開くと、下記の画面が表示されます。
1～5の手順に沿って、「.otf」のフォントファイルを軽量化しましょう。
- 作成元フォントファイル：サブセット化したいフォントファイルを選択
- 作成後フォントファイル：サブセット化したフォントファイルの保存先を指定
- フォントに格納する文字：第一水準漢字＋記号＋ローマ字＋カタカナ＋ひらがなをコピペする
- 作成終了後、WOFFコンバータを起動する：チェックマークを入力
- 作成開始：クリックして完了
3番にコピペするフォントの種類はJIS第1水準漢字だけでも2,965文字と大量ですが、お好みでもOKです。
「サブセット化 格納 文字」で検索し、不要な文字を削除してからコピペしましょう。
Webフォントとして使用できるファイル形式に変換する
事前にWOFFコンバータをインストールしておいた方がサブセット化に成功すると、自動的に下記の画面が表示されます。
1～4の手順に沿ってフリーフォントの拡張子を「.otf」からWebブラウザ対応の「.woff」へ変換する事で、はじめてWebフォントとして利用できるようになるのです。
- 変換前ファイル：サブセット化したフォントを選択
- 変換後ファイル：拡張子が「.woff」に変換されたファイルの保存先を指定
- woff2を作成する：チェックマークを入力する
- 変換開始：クリックして完了
今回は基本の「.woff」に加え、IE非対応ながらより圧縮率の高い「.woff2」も同時に作成しましたが、必須ではありません。
InternetExplorerで表示させるEOTファイルを選択することも可能です。
CSSでフォントの定義と設定を適用させる
作成したwoffファイルをサーバーにアップロードしたら、最後にコーディングを行います。
例題として、「togaliteClass」を適用した要素にWebフォントを反映させるCSSをご紹介しましょう。
<pre>
@font-face {
/*任意のフォント名（フリーフォントの名称など）*/
font-family: "togalite";
/*フォントファイルへのパス（複数指定は上から順に読み込まれる）*/
src: url("/assets/font/togalite.woff2") format("woff2"),
url("/assets/font/togalite.woff") format("woff");
}
.togaliteClass{
font-family: "togalite";
}
</pre>
「@font-face」でアップロードしたフォントを定義し、適用させたい範囲を「font-family」で設定します。
まとめ
Webサイトの印象は、フォントのデザインによって大きく左右されます。
その点、Webフォントならタイトルや見出しに反映させるだけでガラリとビジュアルの印象が変わるうえ、SEOに有利なテキストとして使えるのも大きな強みです。
種類が限られているWebフォントサービスに物足りなさを感じているなら、フリーフォントをサーバーにアップロードするWebフォント化に挑戦してみてはいかがでしょうか。
関連
Webサイト制作Web開発
Webサイト制作Webデザイン
