コーディングメソドロジー

第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/

01 「FONTPLUS」

02 FONTPLUSで利用できる和文フォントの一例

02 FONTPLUSで利用できる和文フォントの一例

03 htmlコード記述例

03 htmlコード記述例

04 「FONTPLUS」のアカウント登録後、公開予定のURL を入力すると、Webフォントに必要な専用スクリプトを呼び出すコードが表示される。

04 「FONTPLUS」のアカウント登録後、公開予定のURLを入力すると、Webフォントに必要な専用スクリプトを呼び出すコードが表示される。

05 CSSコード記述例

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フォントを利用することができ、また、ページ内で利用される文字のみをあらかじめサブセットデータとしてダウンロードして組み込む技術によって高速化も実現されています。
  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • レスポンシブWebデザインセミナーがDVDになりました。
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム