CocoonにGoogle Fontsを導入する

こんにちは、ゆんつです。

皆さん「Google Fonts」をご存知ですか？

Google Fontsは無料で使えるWEBフォントサービスです。

ネットを閲覧している時。

画面に映し出されている文字は、そのデバイスに組み込まれているフォントによって変わります。

つまり使っているパソコンやスマホに搭載されているフォントのうち、そのWEBサイトが指定したフォントで適合するものが表示されているのです。

もし、WEBサイトのフォントの見た目をどのデバイスでも同じにしたい場合。

WEBフォントという外部から読み込んだフォントを使用することで、WEBサイトを閲覧するデバイスが異なっても同じフォントが使われるようになって、フォントの見た目が同じになります。

WEBフォントを使うことで、デバイス間のフォントの差異がなくなりフォントを統一することができるのです。

外部からフォントのデータを読み込むとブログの表示速度が遅くなりそうな気がしますが、Google Fontsは何と言ってもあのGoogleのサーバーから読み込まれますので、よほど沢山のフォントを読み込まない限り、ほとんど速度差はありません。

今日は

について書きたいと思います。

Google Fontsの導入方法

Google Fontsをサイト全体に適用したい場合と、ある特定の部分にだけ適用したい場合で導入方法が異なります。

WEBサイト全体に適用したい場合

Google Fontsをサイト全体に導入したい場合はとても簡単です。

WordPressの管理画面から「Cocoon設定」をクリック。

Cocoon設定画面になるので「全体」タブをクリック。

画面を下の方にスクロールさせると、「サイトフォント」という項目があります。

サイトフォントのフォントのセレクトボックスをクリックすると、サイト全体に適用されるフォントの一覧が表示され、この中にある（WEBフォント）がついているものがGoogle Fontsになります。

好きなWEBフォントを選択して下部にある「変更をまとめて保存」ボタンをクリックすれば、WEBサイト全体の文字が選択したWEBフォントに置き換わります。

以上で導入完了となります。

もし、選択肢の中に使用したいGoogle Fontsがない場合は、次に紹介する「特定の部分にだけ適用したい場合」を参考にしてみてください。

特定の部分にだけ適用したい場合

Google Fontsをヘッダーロゴなどの特定の部分だけに使用したい場合の方法です。

使用するフォントの選択や設定を行う

まずGoogle Fontsのページにアクセスします。

Browse Fonts - Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

1,000種類以上のフォントが登録されているので、検索窓にキーワードを入れて絞り込むか、一覧から選択するなどして、好きなフォントを選択します。

使いたいフォントを選択すると、文字のスタイルを選択する画面になるので、好みのスタイルの横にある「Selecte ○○（その書体のスタイル）」をクリック。

複数スタイルがあるフォントで複数のスタイルを選びたい場合は、続けてクリックしていけば、スタイルはどんどん追加されます。

スタイルを選択すると画面右側に「Selected Family」が表示され、選択したフォント名やスタイル、そのフォントを使用するためのコードが表示されます。

間違ってスタイルを選択した場合はスタイルの横にある「-」をクリックすると削除できますし、さらにスタイルを追加したい場合や別のフォントとスタイルを追加したい場合は、続けて他のスタイルやフォントを選択すれば、このSelected Familyに追加されていきます。

ただし、フォントやスタイルを沢山追加すると沢山のシーンには対応できますが、データ量も多くなりブログ表示が重くなる可能性がありますので、必要なスタイルやフォントだけを入れるようにしましょう。

フォントやスタイルの選択が終わったら、次は実際にGoogle Fontsを使ってみましょう！

Google Fontsのサイトは後からまた使うので閉じないください。

Google Fontsを読み込む設定を行う

Google Fontsを読み込むために、Cocoonでテーマの編集を行います。

WordPressの管理画面から「外観」⇒「テーマファイルエディター」をクリック。

「編集するテーマを選択」で「Cocoon Child」が選択されているのを確認し、「tmp-user」⇒「head-insert.php」を選択します。

するとコードを入力する画面になりますので、先ほどのGoogle Fontsの画面に戻り、「Use on the web」という項目の「link」にチェックが入っていることを確認し、その下にあるコードをコピーして貼り付けます。

コピペすると以下のようになります。

コピペが完了したら「ファイルを更新」ボタンをクリックして入力したコードを保存します。

これでGoogleフォントを読み込む準備は出来ました。

Google Fontsを適用する

現在のブログのタイトルの文字はこんな感じです。

このタイトルの文字を「Google Fonts」の「Kosugi Maru」に変えてみようと思います。

Cocoon Childのスタイルシートを開きます。

Cocoonでサイトのタイトル名をCSSで操作するためのクラスは「.site-name-text」ですので、そのクラスに対してグーグルフォントが適用されるようにCSSを設定していきます。

グーグルフォントの画面に戻ります。

Use on the webの「CSS rules to specify families」という項目にfont-familyという使用するフォントを設定するコードがあるのでコピーして、CSSで適用したい要素を指定しコピーしたコードを貼り付けます。

例えばサイト名に「Kosugi Maru」適用したい場合には、具体的には以下のようなコードになります。

　
　.site-name-text { font-family: 'Kosugi Maru', sans-serif; }
　

設定を保存をして、ブログを確認すると

BEFORE

AFTER

サイトのタイトル名のフォントをFireFoxの開発ツールで確認すると、Google Fontsの「Kosugi Maru」が適用されているのが解ります。

以上のような感じで、Google Fontsを適用したい要素に対しCSSでGoogle Fontsのfont-familyを設定することで、その要素の文字がGoogle Fontsで表示されるようになります。

部分的にではなくサイト全体にGoogle Fontsを指定したい場合には、body要素にfont-familyを設定すればブログ全体のフォントを変更することもできますので、サイトフォントに好きなフォントがない場合などには、好きなフォントをGoogle Fontsで探して設定してみてください。

Google Fontsでブログの表示速度は遅くなったのか？

ブログの表示速度がGoogle Fonts導入前と導入後でどれくらい変わるのかをPage Speed Insightで計測しておきました。

	PC	モバイル
Google Fonts導入前	95	75
Google Fonts導入後	96	74

今回は導入したフォントが1種類だけだったので速度に関する影響は、ほぼありませんでした。

フォントの種類を増やしすぎたり、設定画面でのチェックする項目を増やしたりすぎるとブログの表示速度が遅くなるらしいので、なるべく必要なものだけ選んで入れるようにしましょう。

まとめ

というわけで、CocoonにGoogle Fontsを導入してみました。

CocoonでGoogle Fontsを使うには

だけです。

フォントを変えるだけでブログが今までよりも見やすくなったりするので、もしも

と思っている場合はGoogle Fontsの利用を考えてみてはいかがでしょうか。

それでは、またですー。