TORAT
Webサイトをデザインする際、フォント選びはそのサイトの雰囲気を左右する重要な要素のひとつとなります。
こだわりのあるフォント、おしゃれなフォントをWebサイトに使うことで差別化することができます。 WebサイトにWebフォントを使うことも増えつつあります。
Webフォントを使用するメリット
- 見栄えが良くなる、デザイン性が高くなる
- テキスト表示できるためSEO効果がある
- 他サイトと差別化できる
- どの端末で閲覧しても同じフォントになる
- 自動翻訳に対応できる
Webフォントの使い方はこちら
Webフォント使用の注意点
Webサイトをより魅力的にするWebフォントですが、日本語のWebフォントには最大の問題点があります。それは容量が大きくなってしまうことです。
日本語フォントは含まれる文字数が多いためファイル容量がかなり大きくなります。10MBを超えたりするものもあります。さすがにこれは重すぎて表示するまでに時間がかかってしまいます。表示速度が下がると、検索順位の低下や、閲覧者の離脱につながるため、避けることが望ましいですね。
そんな容量の大きい日本語フォントですが、サブセット化することで容量を軽くする事ができます。サブセット化とは、フォントに含まれる文字の中から必要な文字だけを抜き出しファイルサイズを小さくすることです。
それではダウンロードしたフォントをサブセット化して軽量化する方法をご紹介します。
サブセット化で容量を減らす
好みのフォントをダウンロード
試しにこの棘薔薇フォントというのををダウンロードしました。
それでは容量を確認してみましょう。
なんと16.7MBでした。これはさすがに重い、、
ソフトのインストール
サブセットするにはいくつかのソフトが必要になります。 まずは、下記からサブセットフォントメーカーとWOFFコンバータをインストールします。
サブセットフォントメーカー
インストールしたサブセットフォントメーカーを起動してみましょう。
画面は下のようになっています。
サブセットフォントメーカーでは、アスキー文字 + 非漢字文字 + 第1水準漢字でサブセット化し、ファイルサイズを削減します。
つまり必要なフォントだけを残し使わないフォントは削除します。
- 「作成元フォントファイル」で今回軽量化するフォントを指定します。
- 「作成後フォントファイル」は軽量化した後のフォントの保存場所を指定します。
- 「フォントに格納する文字」は 第一水準漢字＋記号＋ローマ字＋カタカナ＋ひらがなを貼り付けます。下記よりコピペしてください。
- 「作成終了後、WOFFコンバータを起動する」にチェックを入れます。
- 作成開始でサブセット化します。
フォントに格納する文字
第一水準漢字＋記号＋ローマ字＋カタカナ＋ひらがなを下記からコピーし、サブセットフォントメーカーのフォントに格納する文字の部分にペーストします。
https://docs.google.com/document/d/1Qs-XTAZEgFxx9TbfTNCrGMGuEJqxv2T5SKTLRJ4Gv6Q/edit
WOFFコンバータ
- 「変換前ファイル」で先程サブセットフォントメーカーで軽量化したフォントを指定します。
- 「変換後ファイル」で変更した後のファイル名を指定します。
- 「EOTファイルを生成する」でIEに対応したフォントファイルを制作できます。
また、様々なブラウザに対応するため4種類のフォーマットのファイルを作成ことをおすすめします。
- .eot
- .ttf
- .woff2
- .woff
10MBを超えるほとんどの日本語フォントは1MB以下に軽量化することができます。
変換後の容量確認
今回例でサブセット化した 棘薔薇フォントはサイズを87%減少することができました。
まとめ
こだわりのあるフォントを使用することでサイトをより魅力的にすることができますが、日本語のWebフォントを導入する際は容量に注意する必要があります。
ですが今回ご紹介した方法で容量を軽量化することで問題なくサイトに導入することができます。
日本語フォントを使用するときは必須と言っていいと思います。ぜひ活用しWebサイトのデザイン性を高めてみてはいかがでしょうか。
