※ 当サイトではアフィリエイト広告を利用しています

CocoonにGoogle Fontsを導入する

CocoonにGoogle Fontsを導入する Cocoon

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

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

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

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

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

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

ゆんつ
ゆんつ

同じページを見ていたとしても、そのデバイスが搭載しているフォントによって文字の見た目が変わる場合があります

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

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

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

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

今日は

CocoonにGoogle Fontsを導入する方法

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

Google Fontsの導入方法

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

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

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

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

Cocoon設定をクリックする

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

Cocoon設定画面で全体タブをクリック

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

サイトフォント

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

WEBフォントがGoogleFonts

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

ゆんつ
ゆんつ

簡単!

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

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

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

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

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

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

Browse Fonts - Google Fonts
Making the web more beautiful, fast, and open through great typography

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

Google Fontsにアクセスして好きなフォントを選択する

ゆんつ
ゆんつ

日本語のフォントだけを探したい場合は「Languages」から「Japanese」を選択して日本語だけに絞り込むと、一気にフォントの数が減るので探し易くなりますよ

言語をJapaneseにすると日本語フォントが探しやすくなる

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

好みのスタイルの横にある「Selecte ○○(その書体のスタイル)」をクリック

ゆんつ
ゆんつ

今回選択した「Kosugi Maru」というフォントはスタイルが1つですが、複数スタイルがあるフォントもあります。

複数スタイルがあるフォントの一例

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

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

選んだフォントやスタイルはSelected Familyに追加される

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

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

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

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

ゆんつ
ゆんつ

閉じないでね

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

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

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

「外観」⇒「テーマファイルエディター」をクリック

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

Cocoon Childのhead-insert.phpをクリック

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

GoogleFontsの画面からコードをコピペ

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

コピペしたときの画面

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

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

Google Fontsを適用する

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

Google Fonts適用前のブログタイトル

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

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

Cocoonの子テーマのスタイルシートを編集する

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; }
 

スタイルシートにCSSをコピペする

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

BEFORE

Google Fonts適用前のサイトタイトル

AFTER

Google Fonts適用後のサイトタイトル

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

FIreFoxの開発ツールでフォントが変わったのを確認

以上のような感じで、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を使うには

  • WEBサイト全体にGoogle Fontsを適用したい場合 ⇒ Cocoon設定のサイトフォントでWEBフォントを選択
  • 特定の部分にGoogle Fontsを適用したい場合 ⇒ 子テーマのhead-insert.phpにGoogle Fontsのコードをコピペし、子テーマのスタイルシートで要素を選択しGoogle Fontsのfont-familyをコピペする

だけです。

ゆんつ
ゆんつ

簡単、簡単!

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

文字の見た目を変えてみたいなあ

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

それでは、またですー。

コメント

  1. 初心者ブロガー より:

    2023年5月現在は、"Download family"になってるので、この記事の内容は使えませんでした...

    • ゆんつ ゆんつ より:

      初心者ブロガー様

      自分で試してみましたが、この記事の方法でGoogle Fontsが使えることが確認できました。
      「Download family」はフォントを自分のデバイスにダウンロードして使用する方法になります。
      その方法では該当のデバイスでしかGoogle Fontsが使えないため、この記事では紹介しておりません。