Google Fontsとは、Googleが提供するWebフォントのサービスです。

事務所ホームページにGoogle Fontsを入れました。

Webフォントとは、サーバーやインターネットで提供されているフォントを読み込み、Webサイトに表示させるしくみです。

Webフォントを使わない場合、Webサイトを表示するパソコンやスマートフォンにインストールされているフォントでしか表示することができません。このため、Webサイトの方で、日本語はこのフォント、このフォントがインストールされていなかったらあのフォント、英語はこのフォント、このフォントがインストールされていなかったらあのフォント…、というように指定をしておきます。

Webフォントを使えば、パソコンやスマートフォンにインストールされているフォントに関係なく、指定したWebフォントを表示することができます。

このブログは「メイリオ」を最優先で表示するよう指定しており、事務所ホームページも同じです。

ブログを始めたときに、事務所ホームページとの違いを出したくて、事務所ホームページのフォントを「游ゴシック」などに変えてみたりしたのですが、どうもしっくり来ませんでした。Google Fontsの「Noto Sans JP」に変えたい、という思いはその頃からあったものの、当時導入方法を検索したときには難しそうな方法しかヒットせず、「メイリオ」を使い続けてきました。

最近になって、当時よりはWordpressの経験も積んだし、と改めて検索したところ、プラグイン(WordPressに追加するプログラムのようなもの)があることを発見…。

え、お手軽にできちゃうの…。

Webフォントはサーバーで提供されているフォントを読み込むため、Webサイトの表示速度が遅くなるというデメリットがあると言われています。

また、プラグインも、入れすぎるとWebサイトの表示速度が遅くなる、と言われています。

遅くなる原因を2ついっぺんに入れるとどうなるのか?

とりあえず試してみて、あまりにも遅くなったらプラグインでない方法に切り替えよう、と、作業を開始しました。

検索でヒットしたのは「Easy Google Fonts」というプラグインでしたが、プラグインの追加ページを見てみると、「使用中のWordPressのバージョンで未検証」とのこと(2019年7月4日時点)。未検証のプラグインを使っても問題が起こった経験はないのですが、念のため、「互換性あり」となっていた「Google Fonts Typograhy」の方をインストールして有効化しました。

「外観」→「カスタマイズ」を選択すると、今までなかった「Google Fonts」というカスタマイズメニューができていました。

クリックして、まずは「Basic Settings」を選択。

「Font Family」はすべてのフォントを設定するものですので、ここを「Noto Sans JP」に変えるとすべてのフォントがNoto Sans JPに変わります。

変える前

変えた後

見出し、本文等でフォントを別々にしたい場合は、「Font Family」は「Default Font」のままにしておき、その下の「Headings Typography」(見出し)等、「Advanced Settings」の中の「Navigation」(メニュー)、「Content」(本文)等で、それぞれフォントを指定していきます。

Advanced Settings

私の場合はすべてNoto Sans JPに変わればよかったので、「Font Family」を「Noto Sans JP」に変えて、「公開」ボタンを押して終了です。

速度については、トップページの読み込みはやはり遅くなったかな、という印象で、特にスマートフォンでは、表示される前にうっすら別のフォントが出てくるという微妙な感じになっています。

ただ、トップページから他のページへのリンクについては、すでにフォントを読み込んでいるためか、パソコンでもスマートフォンでも、読み込み速度に違和感は感じませんでした。

読み込むフォントの種類を減らす(Noto Sans JPの中で太さなどが何種類かあるので必要なものだけにする)ことで表示速度は改善できるはずですが、このプラグインを使うなら有料プランにアップグレード(笑)。

それはさすがに避けたいので、やはり、プラグインを使わない方法を試してみる必要がありそうです。

今日の花

ブバリア(アカネ科、原産地:熱帯アメリカ)

サイコロのような蕾から、花びらがきれいに4つに分かれて咲くところが特徴的かなと思います。茎がまっすぐで、先端に枝分かれした花がつくので、1本でもボリューム感が出ます。ただ、花は萎れやすいです。すぐに気づいて水切り(ボウルなどにためた水の中で茎を切る)して深めの水につけておくと、しばらくすると復活します。これも実は、いったん萎れかけて復活した後の写真です。丈夫なのかそうでないのか、よくわかりません…。

1日1新
~1日1つ、何か新しいことをする試み

もへじ こんにゃくゼリー塩シークワーサー(天候のせいで動きが鈍く、お菓子ばかりになってます…。おいしかったけれども。)