WordPressで「ウェブフォント」を使い、文字デザインをカスタマイズする

パソコンでWordなどのワープロソフトでフォント(書体)を指定するときは、パソコンにインストールしてあるフォントを選択します。しかし、ブラウザで表示させるウェブページの書体は、見る人の環境によってインストールされているフォントが異なるため、ほとんどが「誰でも入れているOSの基本フォント」を利用するのが原則です。
これは基本的にはパソコンに入っているフォントを使って文字を表示するためなのですが、ページ制作者が狙い通りのフォントを使えないという不自由さがありました。
そこで登場したのがウェブフォントです。
ウェブフォントはパソコンにインストールすることなく、ウェブ上にあるフォントを読み込み表示する仕組みです。そのため、見る人のパソコンの環境に依存せず、ネット経由で随時指定されたフォントを読み込み、表示できます。
と、一見便利でみんなそれを使えばいいじゃないと思われがちなウェブフォントですが、そこまで浸透していない理由もあるのです。それは表示スピードの問題です。
都度指定されたフォントをダウンロードするわけですから、通常の文字や画像に加えフォントをダウンロードする分1ページを表示するためのファイルサイズが大きくなり、表示速度が状況によっては著しく低下してしまいます。特に日本語は文字種(数)が多く、英文などと比べてかなり表示の負担が増えてしまいます。それに対してフォントの「セット」を作ることでファイルサイズを小さくするなどの対策もありますが、それでも通常のページと比べ表示速度の低下は免れません。
これは、ネットのスピードが今後さらに上がっていくことで問題は解決していくかも知れませんが、現状では場合によってはページが空白のまま結構長い時間待たされる場合もあります。

どんな時にウェブフォントを使うと良いか

一般的にはフォントにそこまでこだわる必要がないことが多いと思いますが、デザイン性を追求したいのであれば試してみる価値はあります。
最近ではパソコンだけでなくスマホでサイトを見る機会も多いので、スマホで見やすいフォントを使うという目的で使ってみても良いでしょう。
いずれにせよ、フォントを変えることでサイトイメージのオリジナリティーが上がるのは間違いないので、見た目の差別化を図りたい時に、伝えたいイメージに沿ったフォントをしてすれば効果を得ることができます。
しかし、逆にイメージと離れたフォントを指定してしまうとマイナスイメージになる可能性もあるので要注意。フォントのセンスは案外シビアですから、あまり極端なデザイン文字は利用しないほうが読みやすさという意味でも無難です。

ウェブフォントの設定法

ウェブフォントを使うためには、利用するフォント(フォントには著作権がありますので、フリーでなおかつウェブフォントとして利用することを許可しているフォントしか使えませんのでくれぐれも注意してください。利用の許可に関してはフォントの配布サイトに注意書きがあるはずです)を自前のサーバーにアップロードする方法と、Googleなどのすでにアップロードされているウェブフォントを使う方法があります。

うつくし明朝体

ウェブフォントを利用したサイトの表示例。筆者はこれから説明する「ウェブフォントファン」の「うつくし明朝体」を購入してインストールしてみました。

WordPressでウェブフォントを使うにはプラグインがオススメ

ウェブフォントを使う場合、HTMLコードの中にウェブフォントを読み出すコードと、ウェブフォントを使う場所を指定するコードを追記します。しかし呼び出すためのコードはWordPressの場合テーマファイルを編集する必要があり、コードを書く場所が適切でなかったり、コードの書き方が微妙に間違っていると使えなくなってしまいます。
そのため、初心者がウェブフォントを使う場合は専用のプラグインをインストールすることをオススメします。
とは言っても、プラグインをインストールすればどんなウェブフォントも使えるようになるかいうとそうではなく、フォントごとの専用プラグインとなるので、他のフォントは設定できないものがほとんどです。
ということで、今回オススメするのが「ウェブフォントファン」http://webfontfan.comです。ここではウェブフォントをインストールするだけで利用できるプラグインを販売しています。
無料であればありがたいのですが、比較的安価にウェブフォント+WordPressプラグインを入手できますので、フォントのアップロードやコードの改変の手間とリスクを考えれば、初心者であれば(いえむしろ筆者も)この方が安全といえるでしょう。
4種類のフォントが用意され、自分のサイトのデザインに合わせたフォントを購入し、ダウンロードしたzipファイルをWordPressの「プラグインのアップロード」でインストールし有効化すれば、それだけで自動的にすべてのフォントがウェブフォントに変更されます。見出し(H1など)ごとにフォントを変更したい場合は、CSSをカスタマイズする必要があります。(プラグインにはそこまでの機能は用意されていません)

ということで、ウェブフォントの概要とWordPressでの使い方の最も簡単な方法をご紹介しました。もちろんコードをガリガリ改造して、無料でかつ自前でウェブフォントを利用する方法もありますが、どこに何を書いたらいいのかが比較的難しいため、初心者の方が利用することはあまりオススメしませんので、あえてその方法の解説はここでは行いませんでした。
筆者としてはAdobe クリエイティブクラウドで使えるウェブフォントを利用する場合もありますが、これも一般的なユーザーは使っていないと思いますので、これらの方法はもしご要望があれば改めてご紹介しますね。

なお、当サイトもこのウェブフォントファンの「フロップデザインWEBフォント」を購入して、インストールしてみました。いかがでしょうか?

新刊発売記念でメルマガスタートします

こんな感じの最新情報をリアルタイムでメルマガ配信します。是非登録して皆様のサイトマネージメントに役立ててくださいね。

メルマガ登録・解除
「はじめてのWordPress入門」著者による情報マガジン
 powered by メルマガスタンドmelma! トップページへ

Follow me!

記事の執筆者プロフィール

原久鷹WordPress著者、講師、クリエイターTwitter:@eagleprayer
「はじめてのWordPress入門」著者。WordPressスクール、プライベートレッスン、コンテンツ制作コンサルティングなどで「自分で発信するコンテンツ」づくりをサポート。All AboutではLINEの使い方を定期連載。
  • Facebook
  • twitter
  • Hatena