この記事を読むのに必要な時間は約 5 分です。
(専門用語などにはポップアップする説明をつけているので時間が長く表示されることがあります。
ツールチップの機能については、こちら)

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

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

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

まとめ

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

]]>

くまはちLABのご利用ありがとうございます！ くまはちLABの最新情報をフォローしてゲットしてください！   @eddie24751102