こんにちは、ゆんつです。
皆さん「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設定画面になるので「全体」タブをクリック。
画面を下の方にスクロールさせると、「サイトのフォント設定」という項目があります。
セレクトボックスをクリックすると、サイト全体に適用されるフォントの一覧が表示され、この中にある（WEBフォント）がついているものがGoogle Fontsになります。
好きなWEBフォントを選択して下部にある「変更をまとめて保存」ボタンをクリックすれば、WEBサイト全体の文字が選択したWEBフォントに置き換わります。
簡単！
以上で導入完了となります。
もし、選択肢の中に使用したいGoogle Fontsがない場合は、次に紹介する「特定の部分にだけ適用したい場合」を参考にしてみてください。
特定の部分にだけ適用したい場合
Google Fontsをヘッダーロゴなどの特定の部分だけに使用したい場合の方法です。
1. 使用するフォントの選択や設定を行う
まずGoogle Fontsのページにアクセスします。
1,000種類以上のフォントが登録されているので好きなものを選択します。
日本語のフォントだけを探したい場合は「Languages」から「Japanese」を選択して日本語だけに絞り込むと一気に十数個までフォントの数が減るので探し易くなりますよ。
一覧から使いたいフォントをクリックします。
フォントを選択すると、文字の太さを選択する画面になるので、好みの文字の太さの「Selecte this style」をクリックします。
今回選択した「Kosugi Maru」というフォントはスタイルが1つですが、複数スタイルがあるフォントもあります。
複数スタイルがあるフォントで複数の太さを選びたい場合は、続けてクリックしていけば、スタイルがどんどん追加されます。
スタイルを選択すると画面の右側に「Selected Family」が表示され。、選択したフォント名やスタイル、そのフォントを使用するためのコードが表示されます。
間違ってスタイルを選択した場合は「-」をクリックすると削除できますし、複数のスタイルがある場合に、別のスタイルを追加したい場合は続けて他のスタイルをクリックすれば、複数の文字の太さを追加することができます。
また別のフォントを追加したい場合も、「Browse」をクリックしてフォントの選択画面に戻り、別のフォントを選択することで追加することができます。
フォントやスタイルを沢山追加すると、それだけ沢山のシーンに対応できますが、データ量も多くなりブログ表示が重くなる可能性がありますので、必要なスタイルやフォントだけを入れるようにしましょう。
フォントやスタイルの選択が終わったら、次は実際にGoogle Fontsを使ってみましょう！
Google Fontsのサイトは後からまた使うので閉じないください。
閉じないでね
2. Google Fontsを読み込む設定を行う
Google Fontsを読み込むために、Cocoonでテーマの編集を行います。
WordPressの管理画面から「外観」⇒「テーマエディター」をクリック。
テーマに「Cocoon Child」が選択されているのを確認し、テーマファイルの選択で「tmp-user」⇒「head-insert.php」を選択します。
するとコードを入力する画面になりますので、先ほどのGoogle Fontsの画面に戻り、「Use on the web」という項目の「link」にチェックが入っていることを確認し、その下にあるコードをコピーして貼り付けます。
コピペすると以下のようになります。
コピペが完了したら「ファイルを更新」ボタンをクリックして入力したコードを保存します。
これでGoogleフォントを読み込む準備は出来ました。
3. 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を使うには
・子テーマのhead-insert.phpにGoogle Fontsのコードをコピペする
・子テーマのスタイルシートでGoogle Fontsを適用したい要素を選択し、font-familyをコピペする
だけです。
簡単、簡単！
フォントを変えるだけでブログが今までよりも見やすくなったりするので、もしも
文字の見た目を変えてみたいなあ
と思っている場合はGoogle Fontsの利用を考えてみてはいかがでしょうか。
それでは、またですー。
コメント