お問い合わせ

日本語Webフォントを使用する際のアプローチについて

UI開発者 新牧

この記事はミツエーリンクスアドベントカレンダー2019 - Qiitaの19日目の記事です。

端末を問わずテキストをリッチに表現することのできるWebフォントは、昨今のWebサイト構築において欠かせない技術の1つです。

CSS3から策定され、フォントファイルをサーバーにアップロード、または提供されているフォントファイルから読み込みを行うことで実装できますが、日本語Webフォントの普及は欧文Webフォントに比べ浸透していくまでにタイムラグがありました。

日本語Webフォントの課題

日本語Webフォントが浸透するまでに時間がかかっている理由として、オープンソースで使用できるフォント自体の数が少ないことや、欧文フォントに比べて収録文字数が多く、ファイルサイズが大きいことなどが挙げられます。
ファイルサイズについては、フォントのウェイトパターンをすべて含めてしまうと、大きく膨れ上がることになります。

このような大きなファイルサイズのフォントをそのままWebフォントとして使用すると、通信環境によっては読み込みまでに時間がかかってしまったり、ブラウザの挙動によっては、フォントの読み込みが完了するまでテキストが表示されない「FOIT（Flash of Invisible Text）」と呼ばれる現象が起きる場合もあります。

ユーザーがストレスなく利用できるサイトにするためには、「読み込みの早さ」と「情報の欠落のない正確さ」を兼ねそろえている表示パフォーマンスが考慮された日本語Webフォントの使用が求められています。
どのように日本語Webフォントと付き合っていけばいいのか、何点かアプローチを紹介いたします。

ウェイトパターンの削減

1つのフォントには複数のウェイトパターンが存在します。
同サイト内で、そのすべてを使用する必要があるのか、必要最低限で何パターンのウェイトがあればよいのか、デザイン段階で検討してみるのも1つの手ではないでしょうか。

ビジュアルにも関わる部分なので、エンジニアだけでなくデザイナーやプロジェクトメンバーを交えての議論になりますが、あらかじめ使用するフォントのウェイトパターンを絞ってデザインを作成していくことで、読み込むフォントの容量を削減できます。

日本語Webフォントは特に1ウェイトごとの容量も大きいので、ウェイトを絞って利用するだけでも、ファイルサイズは大きく変わってきます。

font-display: swap; の利用

「FOIT」を解消するための手段として、もっとも手軽に実践できるのが font-display: swap; の活用です。

@font-face {
  font-family: 'Font Name';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

body {
  font-family: 'Font Name', Meiryo, sans-serif;
}

@font-face に font-display: swap; を使用することで、Webフォントを読み込むまでの間、font-family に次点で指定している有効なフォントが適用されます。
上記の指定の場合、Windowsでは、Meiryo が代替フォントとして表示されることになります。
ユーザーに与える情報を少しの間でも欠落させない、という点において有効な手段です。

font-displayプロパティについては、使用できないブラウザもあるので、Can I useなどで対応状況をご確認の上、活用ください。

Google Fontsの利用

2018年9月、オープンソースのGoogle Fontsに日本語フォントが正式に追加されました。
それまではEarly Access（早期アクセス）版の日本語フォントが提供されていましたが、正式版はGoogleのサーバーからHTTP/2で配信され、表示パフォーマンスがより考慮されています。

正式版Google Fontsの特長

  • GoogleのサーバーからHTTP/2で配信
  • リクエストしたブラウザ環境に合わせて、最適なフォント形式でフォントファイルを提供
  • フォントを複数の @font-face に分割し、unicode-range で収録文字をサブセット化
  • 2019年5月21日以降、font-display: swap;の併用が可能に

unicode-range は指定した特定の文字列が該当ページで使用されている場合のみ、対象のフォントリソースをダウンロードする記述子です。
これにより、不要なフォントリソースの読み込みを抑えることができます。

また、ブラウザ環境に合わせたフォント形式の提供という利点を活かしつつ、@font-face に font-display: swap; を指定する方法は、これまで提供されていませんでした。
しかし、2019年5月21日、Google Fontsの公式Twitterにて、font-display: swap;が使用可能になった旨が発表されています。

このようにGoogle Fontsは日本語Webフォントが抱える課題に対して、日々改善が進んでいます。

既存Webサイトで、Early Access（早期アクセス）版を使用している場合や、読み込み指定の記述が最新でない場合は、指定方法を見直してみると新たな改善につながるかもしれません。

ファイルのサブセット化

最新のGoogle Fontsでは unicode-range で自動でサブセット化がされていましたが、Google Fonts以外の日本語フォントのファイルサイズを軽量化したいという場合のために、サブセット化を手動で行う方法を紹介します。

文字列の選定

まずはサブセット化する際に残す文字列を選定します。
サイト内でWebフォント使用箇所の文字列を網羅していて、かつムダな文字列の読み込みを省いた選定をすることで、より効率的なサブセット化ができます。

  • ひらがな、カタカナ、第1水準漢字、記号だけを指定
  • サイト内で使用されている文字列をRPAなどで抽出して指定

など、さまざまな方法でそのサイトに適した文字列を選定します。

サブセット化の注意

フォントファイルに対して、選定した文字列でサブセット化を行っていくのですが、方法によってはもともとフォントに備わっていた以下の情報が削除され、サブセット後のフォントが劣化してしまう場合があります。

  • ヒント（OpenTypeフォントの場合）
  • カーニング情報
  • ビットマップデータ
  • OpenType機能

もともとのフォントに比べ、視覚的にも判断できるほど、劣化してしまう場合があるので注意が必要です。
最後に、劣化しない手動のサブセット化の手法を1つご紹介します。

Pythonのライブラリ「fontTools」を使ったサブセット化

Pythonのライブラリ「fontTools」を使用することで、劣化のないサブセット化ができます。

必要なもの

作業手順

Windows環境での手順例になります。
パスは「C:\Users\ユーザー名」配下で作業することを前提に記載しています。
環境に合わせて、適宜変更してください。

fontTools・virualenvのインストール

fontToolsをインストール

C:\Users\ユーザー名> git clone https://github.com/fonttools/fonttools.git

virualenvのインストール

C:\Users\ユーザー名> pip install virtualenv

仮想環境作成

fonttoolsディレクトリに移動します。

C:\Users\ユーザー名> cd fonttools

仮想環境を作成します。
※「fonttools-venv」部分は自由に命名してください。

C:\Users\ユーザー名> python -m virtualenv fonttools-venv

仮想環境に切り替えます。

C:\Users\ユーザー名\fonttools>C:\Users\ユーザー名\fonttools\fonttools-venv\Scripts\activate.bat

表示が以下のように変わったら切り替え完了です。

(fonttools-venv) C:\Users\ユーザー名\fonttools>

FontToolsを仮想環境にインストールします。

(fonttools-venv) C:\Users\ユーザー名\fonttools> pip install -e .

brotli（woff、woff2形式に変換するためのライブラリ）をインストールします。

(fonttools-venv) C:\Users\ユーザー名\fonttools> pip install brotli

fonttoolsディレクトリに必要ファイル・フォルダーを格納

  • サブセット化するフォントファイル

    • 例：「NotoSans」というフォルダーを作り、その中に格納

  • サブセット化されたフォントを保存するフォルダー

    • 例：「dist」という空フォルダーを新規作成

  • フォントに格納する文字列一覧をテキストファイル

    • 例：chars.txtとしてディレクトリ直下に置く

ディレクトリ構成例

C:\Users\ユーザー名\fonttools
  ├─ chars.txt （格納する文字列一覧のテキストデータ）
  ├─ NotoSans （サブセット化するフォントファイルを格納）
  └─ dist （サブセット化されたフォントを格納するフォルダー）

セブセット化実行

「NotoSans」にあるNotoSansJP-Bold.otfをWOFF2形式にするときの例：

(fonttools-venv) C:\Users\ユーザー名\fonttools> pyftsubset ./NotoSans/NotoSansJP-Bold.otf --text-file=./chars.txt --layout-features='*' --flavor=woff --output-file=./dist/NotoSansJP-Bold.woff2

これで劣化のないサブセット化されたフォントファイルがdistに格納されます！

おわりに

豊かなデザイン表現と、高い表示パフォーマンスを両立させながら日本語Webフォントを使用していくために、目に見えない部分のアプローチをコツコツと続けていくことが大切だと思います。

今回、何点かのアプローチについて紹介させていただきましたが、日本語Webフォントを使用する際に少しでも参考になれば幸いです。

2019年の記事一覧に戻る