WordPressでWEBフォントを使う

この記事を読むのに必要な時間は約 5 分です。

WEBサイトのフォント事情がここ数年でWEBフォントの登場で変化してきました。
そこでWordPressには、今まで通り端末に依存したフォントを使い続けるのか、WEBフォントに変える方向性で変化させていくのかということを検討した結果、今後は種類を絞ってWEBフォントを使う方がいいのではという結論になったのです。

目　次

以前のフォント事情
WEBフォントとは？
プラグインは？
Google WEB フォントの使い方
まとめ

以前のフォント事情

WEBフォントが登場するまでは、フォントは閲覧する端末によってバラバラに表示されており端末にインストールされているフォントのみ表示できるという仕組みでした。
それが近年少し事情が変わってきて必ずしもそうではなくなってきました。

WEBフォントとは？

WEBサーバーからフォントを呼び出すことができるというのが、WEBフォントと呼ばれるものです。
Font Awesome のアイコンフォントやGoogle WEBフォントなどが代表的な例です。

初心者の方でも案外簡単に利用することが可能です。

プラグインは？

Easy Google Fonts で設定できるのは英字のみです。日本語は、使えません。なのでこの[simple_tooltip content='WordPressの機能を拡張してくれるプログラムのこと']プラグイン[/simple_tooltip]を入れるのは止めました。

Better Font Awesome は、アイコンフォントを簡単に挿入できる[simple_tooltip content='WordPressの機能を拡張してくれるプログラムのこと']プラグイン[/simple_tooltip]です。こちらは、重宝しています。
[simple_tooltip content='WordPressの機能を拡張してくれるプログラムのこと']プラグイン[/simple_tooltip]ばかりになるという方には、便利な活用法があったりします。

Google WEB フォントの使い方

Google Fonts を使う方法は、簡単です。

<link href="https://fonts.googleapis.com/css?family=M+PLUS+1p" rel="stylesheet">

1	<link href="https://fonts.googleapis.com/css?family=M+PLUS+1p" rel="stylesheet">

font-family: 'M PLUS 1p', sans-serif;

1	font-family: 'M PLUS 1p', sans-serif;

上記の記述を２つのファイルにするだけですが・・・
もう１つeditor-style.cssにも記述を追加すると[simple_tooltip content='ビジュアルエディタはいわゆるWYSIWYGエディタと呼ばれるもので、本文に設定した書式がそのままエディタ上で反映されます。']ビジュアルエディタ[/simple_tooltip]でもフォントが変更されていることが確認できるようになります。

気をつけたいことは、文字コードがちゃんとUTF-8になっているのか？
WindowsではよくShift-JISになっていることがあるので注意しておきましょう。

まとめ

WEBフォントを使うことのメリットは、端末ごとにバラバラに表示していたフォントを統一できることです。これは、ある意味サイトデザインにも影響するのでしっかり抑えておきたいポイントの１つですね。
ただ、使う場合はGoogle Fonts やFont Awesome の２つくらいにしておきたいと思っています。
それは、デザインを追うことで表示速度が遅くなりすぎることを防ぐことにもつながります。AMPを意識していくつくりを求められる中でできるだけ負担を減らすことも意識しておきたいと言う理由です。