今回は最近のWeb制作業界でよく利用されている日本語Webフォントを実用化する方法について紹介したいと思います。
ちなみに私がWebフォントに憧れるようになったのは、佐野章核さんというグラフィックデザイナーが作ったWebサイトを見たことがきっかけでした。
この佐野章核さんはグラフィックデザイナーを名乗っているのにも関わらず、Photoshopやイラレのエフェクトをあまり使わない海外っぽいデザインが印象的です。
それでいて、日本語サイトではあまり見ない日本語Webフォントを用いて美しいタイポグラフィーによる先進的なデザインを実現しています。
モバイルファーストの時代に突入するにあたり、今後はこのようなサイトが増えていくのではないかな〜という新時代到来を予感させてくれました。
目次
Webフォントを使うメリット、デメリットについて
日本語Webフォントが最近流通し始めている背景には、それなりの理由があります。
- 見栄えが良い。デザインに違いが出せる。
- 簡単にレスポンシブに対応できる。
- Retinaディスプレイでも綺麗に見える。
- SEOに有利。
- テキストなので修正が楽。
対して日本語Webフォントを利用する最大のデメリットは、読み込みに時間が掛かることでした。これが原因で日本語Webフォントは長らく日本の市場で使い物にならないというレッテルが貼れていました。
しかし時が経ち、現在では日本語Webフォントの表示を高速化する様々なテクニックが登場しました。
Googleサーバーによるキャッシュを利用する
その一つが、Googleサーバーからのキャッシュによって高速表示が可能な「Noto Sans Japanese」というフォントを利用することです。詳細はこちらをご参照ください。
参考 軽くて美しい日本語Webフォント発見♫Noto Sans Japaneseの使い方
この方法はインストールが簡単で表示も速いのでとても便利なのですが、ユーザーが万一「Noto Sans Japanese」というフォントを過去に読み込んだことが無い場合は表示が遅い、という弱点を抱えていました。
日本語Webフォントのサブセット化によって軽量化する
そこで今回着目したテクニックが、日本語Webフォントのサブセット化です。
どういう事かと言うと、通常10MBくらいある日本語Webフォントを軽量化して1MB以下に落とし、読み込みを早くさせるというものです。
どのような方法を用いて軽量化するかというと、膨大な量を抱える漢字のデータをできる限り削除し、ファイルサイズを小さくする、といったものです。
ここで削除される漢字は通常私たちが使うことが無いようなマニアックな漢字のことなので、サブセット化することでフォントの利用に支障が出るということはありません。
日本語Webフォントをサブセット化する手順
まずは利用したい日本語Webフォントをダウンロードしてください。下記のサイトなどからいくつかいいのが見つけることができると思います。
ソフトをインストール
下記のサイトから「サブセットフォントメーカー」「woffコンバーター」をインストールください。
次に、フォントに格納する文字（第一水準漢字＋記号＋ローマ字＋カタカナ＋ひらがな）をダウンロードします。
サブセットフォントメーカーを使用してWebフォントのファイルのサイズを小さくする
インストールした「サブセットフォントメーカー」を使用してWebフォントのファイルサイズを軽量化します。
- 「作成元フォントファイル」で軽量化するWebフォントを指定
- 「作成後フォントファイル」で軽量化したあとのフォントファイルの保存場所を指定
- 「フォントに格納する文字」の箇所へ、先ほどダウンロードした文字をコピペする
- 「作成後、WOFFコンバーターを起動する」にチェックを入れて、「作成開始」ボタンをクリック
- 変換後のフォントファイルが1MB以下になっていることを確認ください
woffコンバーターを使用し、拡張子をwoffに変換
- 「変換前ファイル」でさきほど軽量化したフォントを指定
- 「変換後ファイル」で拡張子を変更した後のファイル名を指定
- 「EOTファイルを生成する」にチェックを入れて、「変換開始」をクリック
ちなみにEOTファイルはIEでも表示させるためのフォントファイルです
サイトに日本語Webフォントをインストール
これで日本語Webフォントのサブセット化は完了しました。あとはサイトに日本語WebフォントをインストールすればOKです！軽量化したWebフォントをディレクトリーに配置し、CSSにフォント指定のコードを書きます。
以下は「はんなり明朝」というフォントをインストールした例：
@font-face {
font-family: "hannari";
src: url('../webfonts/hannari.eot'),
url('../webfonts/hannari.woff');
}
body{
font-family: "hannari", "HGS明朝E", "ヒラギノ明朝 Pro W6",
"Hiragino Mincho Pro","ＭＳ Ｐ明朝",serif !important;
}以上で完了です。
ちなみに私が実際にサブセット化した日本語Webフォントを導入したサイトはこちら↓↓
サイトのところどころの見出しなどで「うつくし明朝」を使っています。
フォントによっては文字間の整列が全く整ってい無いので、細かいことを気にする人はカーニングしたいと思い始めるかもしれません。
その際はHTMLでカーニングするという少し面倒臭い方法を駆使しなければならないのですが、下記のサイトなどをご参考ください。
以上です。
長々と書いてしまいましたが、最後まで読んでいただいてありがとうございました！
