こんにちは、ゆんつです。
皆さん「Google Fonts」をご存知ですか？
Google Fontsは無料で使えるWEBフォントサービスです。
ネットを閲覧している時。
画面に映し出されている文字は、そのデバイスに組み込まれているフォントによって変わります。
つまり使っているパソコンやスマホに搭載されているフォントのうち、そのWEBサイトが指定したフォントで適合するものが表示されているのです。
同じページを見ていたとしても
そのデバイスが搭載しているフォントによって
文字の見た目が変わる場合があるのです
ところがWEBフォントを使うと、デバイスに搭載されているフォントではなく外部からフォントを読み込むため、デバイスが違ってもそのWEBサイトを閲覧する際のフォントは同じになります。
WEBフォントを使うことにより、そのWEBサイトを見る時のデバイス間のフォントの差異がなくなりフォントを統一することができるのです。
外部からデータを読み込むとブログの表示速度が遅くなりそうな気がしますが、Google Fontsは何と言ってもあのGoogleのサーバーから読み込まれますのでよほど沢山のフォントを読み込まない限り、ほとんど速度差はありません。
今日はブログテーマ「Cocoon」にGoogle Fontsを導入する方法について書きたいと思います。
導入方法
とても簡単に導入することが出来ます。
1. 使用するフォントの選択や設定を行う
まずGoogle Fontsのページに飛びます。
900以上のフォントが登録されているので好きなものを選択します。
日本語のフォントだけを探したい場合は「Languages」から「Japanese」を選択して日本語だけに絞り込むと一気に十数個までフォントの数が減るので探し易くなりますよ。
使いたいフォントの欄にある右上のプラスを押すと、そのフォントが画面下部のボックスに追加されます。
フォントが追加されるとボックスのバーには「〇（選択したフォントの数）Family Selected」と表示されます。
複数のフォントが使いたい場合は、フォント欄にある「+」をクリックしてどんどんフォントを追加していきます。
追加するフォントを全部ボックスに入れたら、「-」ボタンをクリックしてボックスを開きます。
すると追加したフォントの細かな設定を行う画面が現れます。
CUSTOMIZEタブをクリックすると開かれるカスタム画面では文字の太さのパターンを設定したり、フォントの適用範囲を設定することができます。
選んだフォントによって設定できる項目や内容は変わってきますが、それほど難しい内容ではないので悩むことはほぼ無いと思います。
必要なものにチェックを入れていきます。
沢山チェックを入れるとそれだけ沢山のシーンに対応できますがデータ量も多くなりブログ表示が重くなる可能性がありますので、必要なものだけ入れるようにしましょう。
たとえばこの設定画面にはLanguageという項目があります。
これは、このフォント（Kosugi Maru）をどの文字に適用するかを選択する項目です。
「Cyrillic」はキリル文字という特殊な文字にこのフォントを適用するときにチェックします。
「Japanese」はこのフォントを日本語に使用するときにチェックします。
「Latin」はこのフォントを英数字に使用する場合にチェックします。
僕は日本語と英語で使いたいので「Japanese」と「Latin」にチェックを入れて完了。
設定を終えたらEMBEDというタブに移動すると「Embed Font」という項目にコードがありますので、それをコピーしておきます。
このページはまた後から使うので閉じないください。
閉じないでね
2. Cocoonのテーマを編集する
Cocoonでテーマの編集を行います。
テーマに「Cocoon Child」が選択されているのを確認し、テーマファイルの選択で「tmp-user」→「head-insert.php」を選択します。
するとコードを入力する画面が出ますので、一番下に先ほどGoogle Fontsでコピーしたコードを貼り付けます。
「ファイルを更新」ボタンをクリックして入力したコードを保存します。
これでGoogleフォントを読み込む準備は出来ました。
3. 実際に使ってみる
現在のブログのタイトルの文字はこんな感じです。
このタイトルの文字を「Google Fonts」の「Kosugi Maru」に変えてみようと思います。
Cocoon Childのスタイルシートを開きます。
Cocoonでサイトのタイトル名をCSSで操作するためのクラスは「.site-name-text」ですので、そのクラスに対してグーグルフォントが適用されるようにCSSを設定していきます。
先ほどのグーグルフォントのボックスに戻ります。
まだ閉じてないですよね
「Specify in CSS」という項目に「font-family:～」という個所があるのでこれをコピーします。
そしてスタイルシートで適用する要素を指定してこれを貼り付けます。
.site-name-text { font-family: 'Kosugi Maru', sans-serif; }
設定を保存をして、ブログを確認すると
BEFORE
AFTER
タイトルのフォントにGoogle Fontsの「KOSUGI MARU」が適用されたのが解ります。
お疲れさまでした。
タイトルだけではなくブログ全体に指定したい場合にはbody要素に設定すればブログ全体のフォントを変更することもできますので、その辺りは用途に応じて設定してください。
Google Fontsでブログの表示速度は遅くなったのか？
ブログの表示速度がGoogle Fonts導入前と導入後でどれくらい変わるのかをPage Speed Insightで計測しておきました。
| PC | モバイル | |
|---|---|---|
| Google Fonts導入前 | 95 | 75 |
| Google Fonts導入後 | 96 | 74 |
誤差の範囲内ですね
今回は導入したフォントが1種類だけだったので速度に関する影響はありませんでした。
フォントの種類を増やしすぎたり、設定画面でのチェックする項目を増やしたりすぎるとブログの表示速度が遅くなるらしいので、なるべく必要なものだけ選んで入れるようにしましょう。
まとめ
CocoonでGoogle Fontsを使うには
・head-insert.phpにGoogle FontsのEMBEDのコードをコピペする
・Google Fontsを適用したい要素のスタイルにfont-familyをコピペする
だけです。
簡単、簡単
フォントを変えるだけでブログが今までよりも見やすくなったりするので、もしも「文字の見た目を変えてみたいなあ」と思っている場合はGoogle Fontsの利用を考えてみてはいかがでしょうか。
それでは、またですー。
コメント