こんにちは、mickです。
プログラマ系SEとして11年勤務。
見栄えのいいWordPressのオンラインサイトってどうやってつくるか悩みます。
その解決方法のひとつにデザインのよいフォントを使うというのがあります。
いま人気のあるオンラインサイトが採用しているのが「Webフォント」。
Appleのように見栄えのよいオンラインサイトには、このWebフォントが使われていると思います。
そこで本サイトでもWebフォントを導入することにしました。
WordPressはプラグインGoogle Fonts Typography
WordPressでWebフォントを使うには、プラグインGoogle Fonts Typographyをインストールするだけです。
Google Fonts Typographyは、900を超えるフォントが用意されていて試すにはちょうどいいプラグインだと思います。
Webフォントの設定は、外観＞カスタマイズから
Webフォントの設定は、簡単です。
外観＞カスタマイズ＞Googleフォントを選びます。
細かく設定できますが、まずは「基本設定＞ベースタイポグラフィ」だけでよいです。
「フォントファミリー」から自分のオンラインサイト向けのフォントを探します。
フォントを選ぶと、右側の画面ではサンプルを確認できます。確認も簡単です。
とりあえず間違いなさそうな人気Webフォント
900もWebフォントがあると選ぶのは大変。
そこで⇒ Googleフォント分析サイト（英文）から人気TOP3を紹介します。
本サイトでは、現在「Segoe UI」を採用しています。
1.Roboto
Robotoは、GoogleがAndroidのシステムフォントとして開発したものです。
2.Open Sans
Open Sansは、Googleがウェブサイトの一部または印刷広告書類とウェブ広告に使っているフォントです。
3.Lato
Latoは、ŁukaszDziedzicによって設計されたフォントです。
Webフォントはインターネット上に保存されている
Webフォントと従来フォントは、保存先が違います。
従来フォントは、パソコンやスマホに保存されています。
Webフォントは、インターネット上に保存されています。
Webフォントの方が誰がオンラインサイトを訪れても同じように見えることになります。パソコンやスマホにフォントがなくてもインターネット上にあるからです。
従来フォントを使っているオンラインサイトで考えてみます。
オンラインサイトで使っている従来フォントが、閲覧先のパソコンやスマホに保存されていないときは、デフォルトの従来フォントが選ばれます。
その結果、オンラインサイト設計者が意図しない見え方となります。
まとめ。これからはWebフォント
同じような内容を扱っているオンラインサイトでも印象が違うことがあると思います。
その要因のひとつには、間違いなくフォントの違いがあると思います。
例えば、iPhoneやApple Watchなどデザインを重視しているAppleは独自開発したフォントを使っています。
WordPressでは、プラグインGoogle Fonts Typographyを使えば900以上の中からWebフォントを選べるので、きっと自分にぴったりのものが見つかると思います。
ぜひお試しください。
以上、みなさまの助けなれば幸いです。
初稿 2020/06/22
