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をヘッダーロゴなどの特定の部分だけに使用したい場合の方法です。

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

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

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

1,000種類以上のフォントが登録されているので好きなものを選択します。

GoogleFonts公式サイトで好きなフォントを選択する

ゆんつ
ゆんつ

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

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

一覧から使いたいフォントをクリックします。

一覧から使用したいフォントを選択

フォントを選択すると、文字の太さを選択する画面になるので、好みの文字の太さの「Selecte this style」をクリックします。

フォントのスタイルを選択

ゆんつ
ゆんつ

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

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

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

Selected Family

間違ってスタイルを選択した場合は「-」をクリックすると削除できますし、複数のスタイルがある場合に、別のスタイルを追加したい場合は続けて他のスタイルをクリックすれば、複数の文字の太さを追加することができます。

また別のフォントを追加したい場合も、「Browse」をクリックしてフォントの選択画面に戻り、別のフォントを選択することで追加することができます。

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

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

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

ゆんつ
ゆんつ

閉じないでね

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

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

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

WordPress管理画面で外観⇒テーマエディターをクリック

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

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

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

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

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

コピペしたときの画面

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

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

3. 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導入前9575
Google Fonts導入後9674
ゆんつ
ゆんつ

ほとんど変化なし!

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

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

まとめ

CocoonでGoogle Fontsを使うには

・子テーマのhead-insert.phpにGoogle Fontsのコードをコピペする

・子テーマのスタイルシートでGoogle Fontsを適用したい要素を選択し、font-familyをコピペする

だけです。

ゆんつ
ゆんつ

簡単、簡単!

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

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

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

それでは、またですー。

コメント