CocoonにGoogle Fontsを導入する

Cocoon

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

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

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

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

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

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

ゆんつ
ゆんつ

同じページを見ていたとしても

そのデバイスが搭載しているフォントによって

文字の見た目が変わる場合があるのです

ところがWEBフォントを使うと、デバイスに搭載されているフォントではなく外部からフォントを読み込むため、デバイスが違ってもそのWEBサイトを閲覧する際のフォントは同じになります。

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

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

今日はブログテーマ「Cocoon」にGoogle Fontsを導入する方法について書きたいと思います。

導入方法

とても簡単に導入することが出来ます。

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

まずGoogle Fontsのページに飛びます。

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

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

Google Fontsの選択画面

ゆんつ
ゆんつ

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

Languageで絞り込むと日本語フォントを探し易い

使いたいフォントの欄にある右上のプラスを押すと、そのフォントが画面下部のボックスに追加されます。

+をクリックしてフォントを追加

フォントが追加されるとボックスのバーには「〇(選択したフォントの数)Family Selected」と表示されます。

フォントが追加された

複数のフォントが使いたい場合は、フォント欄にある「+」をクリックしてどんどんフォントを追加していきます。

追加するフォントを全部ボックスに入れたら、「-」ボタンをクリックしてボックスを開きます。

-ボタンをクリックすると設定画面が開く

すると追加したフォントの細かな設定を行う画面が現れます。

CUSTOMIZEタブをクリックすると開かれるカスタム画面では文字の太さのパターンを設定したり、フォントの適用範囲を設定することができます。

CUSTOMIZEタブでフォントのサイズや適用範囲を設定

選んだフォントによって設定できる項目や内容は変わってきますが、それほど難しい内容ではないので悩むことはほぼ無いと思います。

必要なものにチェックを入れていきます。

沢山チェックを入れるとそれだけ沢山のシーンに対応できますがデータ量も多くなりブログ表示が重くなる可能性がありますので、必要なものだけ入れるようにしましょう。

たとえばこの設定画面にはLanguageという項目があります。

これは、このフォント(Kosugi Maru)をどの文字に適用するかを選択する項目です。

「Cyrillic」はキリル文字という特殊な文字にこのフォントを適用するときにチェックします。

「Japanese」はこのフォントを日本語に使用するときにチェックします。

「Latin」はこのフォントを英数字に使用する場合にチェックします。

僕は日本語と英語で使いたいので「Japanese」と「Latin」にチェックを入れて完了。

設定を終えたらEMBEDというタブに移動すると「Embed Font」という項目にコードがありますので、それをコピーしておきます。

EMBED Fontに記載されているコードをコピー

このページはまた後から使うので閉じないください。

ゆんつ
ゆんつ

閉じないでね

2. Cocoonのテーマを編集する

Cocoonでテーマの編集を行います。

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

head-insert.phpを選択する

するとコードを入力する画面が出ますので、一番下に先ほどGoogle Fontsでコピーしたコードを貼り付けます。

Embed Fontでコピーしたコードをhead-insert.phpにコピペ

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

コードをコピペしたら設定を保存

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

3. 実際に使ってみる

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

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

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

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

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

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

先ほどのグーグルフォントのボックスに戻ります。

ゆんつ
ゆんつ

まだ閉じてないですよね

「Specify in CSS」という項目に「font-family:~」という個所があるのでこれをコピーします。

「Specify in CSS」のfont-familyをコピー

そしてスタイルシートで適用する要素を指定してこれを貼り付けます。

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

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

BEFORE

Google Fonts適用前のタイトルは線が細い

AFTER

Google Fonts適用後のタイトルは字に適度な太さがある

タイトルのフォントにGoogle Fontsの「KOSUGI MARU」が適用されたのが解ります。

開発ツールでKosugi Maruの適用を確認

ゆんつ
ゆんつ

お疲れさまでした。

タイトルだけではなくブログ全体に指定したい場合にはbody要素に設定すればブログ全体のフォントを変更することもできますので、その辺りは用途に応じて設定してください。

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

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

PCモバイル
Google Fonts導入前9575
Google Fonts導入後9674
ゆんつ
ゆんつ

誤差の範囲内ですね

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

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

まとめ

CocoonでGoogle Fontsを使うには

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

・Google Fontsを適用したい要素のスタイルにfont-familyをコピペする

だけです。

ゆんつ
ゆんつ

簡単、簡単

フォントを変えるだけでブログが今までよりも見やすくなったりするので、もしも「文字の見た目を変えてみたいなあ」と思っている場合はGoogle Fontsの利用を考えてみてはいかがでしょうか。

それでは、またですー。

コメント