- Coding Methodology
- 第61回 和文に対応したWebフォントを導入しよう
第61回 和文に対応したWebフォントを導入しよう
Webフォントを使えば、さまざまな書体を自身のサイトに表示することができ、表現の幅が広がります。前回紹介した「Google Fonts」や和文フォントを豊富に提供している「FONTPLUS」などの優秀なサービスの登場によって、より簡単にWebフォントを導入できるようになりました。今回は先述の「FONTPLUS」を使った、和文書体に対応したWebフォントの導入方法を紹介します。
- Webフォントを導入するメリット
- これまでの「Webフォント」は読み込みや表示に時間がかかるという問題があって、あまり普及が進んでいなかったのですが、サイトで使われている文字だけをプリセット化して利用できるWebサービスや、インフラ自体の改善などによって、現在ではWebフォントの表示時間は劇的に早くなり、実用に十分足り得るものとなっています。PCにインストールされていないようなフォントを使用する場合は、画像にして表示する方法が多く用いられていたため、SEO効果の低下、ファイルサイズの増加、更新性といった問題も浮き出てきますが、これらの問題は「Webフォント」で解決することができます。
- 和文書体が豊富な「FONTPLUS」の使い方
- これまで和文のWebフォントについては、常用漢字だけでも2,100文字以上あり、ダウンロードに時間がかかることもあって、欧文フォントに比べて一般利用が遅れていました。しかし、最近は実用性の高い和文のWebフォントサービスが登場してきています。今回はフォントワークスやモリサワなど、主要な和文フォントメーカーの書体が利用できる「FONTPLUS」（01）を、ご紹介します。
01 「FONTPLUS」http://webfont.fontplus.jp/
02 FONTPLUSで利用できる和文フォントの一例
03 htmlコード記述例
04 「FONTPLUS」のアカウント登録後、公開予定のURLを入力すると、Webフォントに必要な専用スクリプトを呼び出すコードが表示される。
05 CSSコード記述例
- 「FONTPLUS」の使い方
-
通常、入会金10,000円（税抜）を支払い、ページビューごとプリペイド方式で支払う「スマートライセンス」（10万PVで1,000円（税抜）～）、または「バリューライセンス」（1ライセンス年間12,000円（税抜））という料金設定から選ぶことができますが、今回は無料トライアルを利用します。
まずは日本語Webフォントにしたい文字を通常通りマークアップします（03-A）。次にFONTPLUSで公開したいURLを登録すると、専用のスクリプトが発行されるので（04）、それをコピーして<head>に記載します（03-B）。
FONTPLUSで利用したい書体「モトヤバーチ3」を選択し、こちらに記載があるCSSコードを和文Webフォントを使用したい箇所に追記します（05）。以上で日本語Webフォントの実装が完了です。
「FONTPLUS」は「Google Fonts」とは違い、一度専用のスクリプトを取得・設定すれば、あとはスタイルを変更するだけでさまざまなWebフォントを利用することができ、また、ページ内で利用される文字のみをあらかじめサブセットデータとしてダウンロードして組み込む技術によって高速化も実現されています。
