WordPressでWEBフォントを使う
この記事を読むのに必要な時間は約 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 を使う方法は、簡単です。
1 |
<link href="https://fonts.googleapis.com/css?family=M+PLUS+1p" rel="stylesheet"> |
1 |
font-family: 'M PLUS 1p', sans-serif; |
上記の記述を2つのファイルにするだけですが・・・
もう1つeditor-style.cssにも記述を追加すると[simple_tooltip content='ビジュアルエディタはいわゆるWYSIWYGエディタと呼ばれるもので、本文に設定した書式がそのままエディタ上で反映されます。']ビジュアルエディタ[/simple_tooltip]でもフォントが変更されていることが確認できるようになります。
気をつけたいことは、文字コードがちゃんとUTF-8になっているのか?
WindowsではよくShift-JISになっていることがあるので注意しておきましょう。
まとめ
WEBフォントを使うことのメリットは、端末ごとにバラバラに表示していたフォントを統一できることです。これは、ある意味サイトデザインにも影響するのでしっかり抑えておきたいポイントの1つですね。
ただ、使う場合はGoogle Fonts やFont Awesome の2つくらいにしておきたいと思っています。
それは、デザインを追うことで表示速度が遅くなりすぎることを防ぐことにもつながります。AMPを意識していくつくりを求められる中でできるだけ負担を減らすことも意識しておきたいと言う理由です。
![]() |
くまはちLABのご利用ありがとうございます! |