敷居が下がってきたWebフォントの利用
少し前までは、日本語のフォントが少なったことや、そのサイズの大きさから敬遠されがちだったWebフォントも、最近は環境の改善から利用しているサイトも増えてきました。特にGoogle Fontsなどのフォントサービスで日本語のフォントが増えたことなども利用に拍車を掛けています。コストをかけずにウェブサイトのデザインやブランディングにフォントを活用できることで、表現の選択肢を大きく増やすことができますので活用したいところです。
Webフォントの利用方法は２種類
Webフォントを利用するには、
- フォントファイルを用意してサーバにアップロードして利用する方法
- Webフォントサービスを利用する方法
の２通りの方法がありますが、ここではWordPressで、フォントをサーバにアップロードして利用する方法を紹介します。
ライセンスを確認する
まず利用するフォントがWebフォントとして利用できるフォントかどうかを確認する必要があります。有料のフォントであればそのあたりはクリアされているはずですが、フリーフォントを使用するのではあれば、必ずライセンスを確認してください。商用利用、改変、再配布などが許可されているかどうかを明確にすることが重要です。
一般には以下のライセンスであれば商用利用（当然個人利用）も可能です。
主要な商用利用可能なライセンス:
- SIL Open Font License (OFL)
-
このライセンスはフリーフォントの利用、改変、再配布を許可していますが、フォント自体を販売することは禁止されています。また、改変したフォントも同じOFLライセンスの下で配布する必要があります。
- Apache 2.0 License
-
このライセンスはフォントの利用、再配布、改変、および派生作品の作成を許可します。派生作品を作成する場合でも、元のフォントと同じApache 2.0ライセンスを使用する必要はありません。また、Apache 2.0でライセンスされたフォントを商用製品の一部として使用することも許可されています。
Google Fontsのライセンス
Google Fontsは、大部分がSIL Open Font License (OFL) のもとで提供されています。これは、フォントを無料で利用、改変、再配布することが許可されていることを意味します。商用プロジェクトでの利用も許可されており、Webサイトや印刷物、アプリケーションなどのさまざまなプロジェクトに使用することができます。ただし、ライセンスの条項に従い、フォントをそのまま販売することなどは禁止されています。
フォントをダウンロード
利用したいフォントをダウンロードします。以下のようなフォントサイトなどからダウンロードできます。
ウェブフォントとして利用できる日本語フリーフォント
（2023.11月現在）
フォントをサブセット化
Webフォントのサブセット化とは、ページの読み込み速度を向上させるためにフォントファイルから使用しない文字を取り除き、ファイルサイズを減らす作業です。特に日本語フォントの場合、全ての文字を含むと非常に大きなファイルサイズになるため、サブセット化することでサイトの読み込み速度をあげることができます。
ただし、サブセット化すると選んだ文字しか指定したフォントで表示されず、それ以外の文字は表示されません。もしサイト全体の文字でWebフォントを利用するのであれば、サブセット化は現実的ではありません。
逆にメニュー名や、キャッチコピー、見出し文など限定された箇所にのみWebフォントを利用するのであればサブセット化は必須となります。
サブセット化をするにはダウンロードしたフォントファイルから、必要な文字だけを取り出して、新たにフォントファイルを作成する必要があります。フォントファイルの作成にはサブセットフォントメーカーという、専用のソフトを利用します。
↑WIn,Mac対応のサブセットフォントメーカーです。フリーソフトです。
サブセットフォントメーカーの使い方
①ダウンロードしたフォントファイルを指定します。
②サブセット化するファイルの名前と保存場所を指定します。
③選択する文字を指定します。
④「作成開始」でサブセット化したフォントファイルを作成します。
※「作成終了後、WOFFコンバータを起動する」とありますが、Mac環境では起動しませんでした。
WOFF形式に変換
ダウンロードしたフォントファイルのファイル形式は、TTF（TrueType Font）形式などですが、ウェブ用途に利用するのであればWOFF（Web Open Font Format）形式の方が適しています。WOFFは、フォント配信に特化しているためファイルサイズが小さく、また読み込み時間も短縮できます。多くのブラウザでの互換性も高いです。
TTFをWOFFに変換するには、フリーソフトやコンバーターを利用します。
またフォントによっては最初からWOFF形式でダウンロードできるものもあります。サブセット化しないのであればそのまま利用できます。
フォントファイルをアップロード
WOFFに変換したフォントファイルをアップロードします。アップロードする場所は、ファイルのURLが分かればどこでもかまいません。
WordPressのメディアに追加できれば一番カンタンなのですが、WOFFファイルはメディアに追加することができないので、FTPを利用してテーマ内に「fonts」フォルダを作成し「subset-fonts.woff」を追加・アップロードします。
CSSで読み込み
- WordPressのテーマや子テーマのスタイルシートに以下のコードを追加します。
- 以下のようなコードをスタイルシートに追加して、フォントを読み込みます。
@font-face {
font-family: 'font-no-namae'; /* 任意のフォント名を指定します */
src: url('フォントファイルまでのパスが入ります/subset-fonts.woff') format('woff'); /* フォントファイルまでのパスを指定します */
font-weight: normal;
font-style: normal;
}
例えば、ドメイン直下にインストール、テーマフォルダ名「te-ma」の中の「fonts」フォルダの中の「subset-fonts.woff」を指定する場合は一般的に以下となります。
https://{domainname}/wp-content/themes/te-ma/fonts/subset-fonts.woffあとはフォントを指定したい箇所に作成したfont-familyを設定します。以下の場合だと、クラス名「web-fonts」
.web-fonts {
font-family: 'font-no-namae';
}
以上で完了です。
読み込み速度の変化
Webフォントサービスへのリンクを使った方法と、今回ご紹介した、サブセット化したフォントファイルをアップロードする方法で読み込み速度にどの程度違いがあるのか試してみました。
このサイトのロゴ「NAPPA WEB」はGoogleフォントの「Architects Daughter」というWebフォントを利用しています。このロゴの表示をサブセット化する前と後でどの程度違うか、PageSpeed Insightsを使って測定してみました。
Googleフォントへのリンクで表示した場合の測定結果
サブセット化したフォントファイルで表示した場合の測定結果
そもそも数値的にどうなの、てのは置いといてはっきりとした効果がでています。サイトの表示が早いというのは、メリットしかないので試す価値はあると思います。
以上、
