スポンサーリンク

Google Fonts を WordPress の 子テーマに追加する方法

5月 17, 2020

スポンサーリンク

Google Fontsを使うと速度が遅くなるのかなと思いながら、初めて知ったのでなんだか使いたくなって結構、使用しています。

Google Fonts (旧 Google Web Fonts)はWebフォントとして無料で提供されている、プログラミングインタフェースとして利用可能なインタラクティブなディレクトリーサービスである。

出典:Wikipedia

ここでは、速度のことはひとまず置いておいて(笑)WordPressの子テーマに追加する方法を記事にしてみます。

ちなみに、本サイトでは、現在、テーマに Luxeritas さん を使用しております。

スポンサーリンク

ここでの目標

この記事を書いている現在、このサイトのキャッチコピーに「metacognition」という単語を載せていますが(メタ認知という意味です)、これは Google Font の Fredericka the Great というフォントを使って表示しています(サイト構成を変えてしまっていたらすみません)。

Fredericka the Great のキャプチャです
Fredericka the Great のキャプチャです

正直この単語 1つを表示するだけだったら画像にしてしまったほうが速度的には良いのかもしれないけれど、まぁ Fredericka the Great を使っているのです。

以下、 このフォントをサンプルに、使用方法を記載していきます。

Google Fontsサイトで好きなフォントを探す

Google Fonts サイトへ行くと、"Display", “Language", “Font Properties" などでフォントを検索できるので、好きなフォントを探してみましょう。

Google Fonts
Google Fonts

私は、たまたま上図のように “Display" を色々見ていて、たまたま Fredericka the Great を見つけました。"Handwriting"にも可愛いフォントがたくさんありますよ。

使いたいフォントの詳細、サンプル表示をチェック

使いたいフォントが見つかったら、まずは詳細ページにてどんな文字が対応されているかチェックしましょう。[SEE SPECIMEN] をクリックすると、フォントの詳細、サンプル表示のページへ移動します。

# SPECIMEN て TOEIC必須英単語でしたっけ?(笑)

太字があるかどうかなど、チェックしてください。多くのフォントはアルファベットや数字は対応していても、日本語に対応しているフォントはほとんどありません。また、まれに大文字は対応しているけど小文字はないとかもあるようです。

SEE SPECIMEN
SEE SPECIMEN

↓ Fredericka の詳細、サンプルページです。アルファベット、数字、いくつかの記号のみ対応しています。フォントスタイルはレギュラーのみ。bold, small, large などは現時点では用意されていません。

Fredericka の詳細、サンプルページ
Fredericka の詳細、サンプルページ

使いたいフォントの右上+ボタンをクリック

そのフォントでOKだったら、右上の赤い+ボタンをクリックします。

+ボタン
+ボタン

選択フォントファミリー

赤い+ボタンを押すと、ブラウザ右下に下図のボックスが出るので、EMBED(埋め込み)情報を見ます。ここにある html と css を子テーマに追加すればフォントを使うことができます。

選択フォントファミリー
選択フォントファミリー

子テーマの編集

[子テーマの編集]メニュー >> [Head タグ]タブを選択しファイルに、<link href=~> の html コードをコピペします。

[Head タグ]
[Head タグ]

[style.css]タブを選択し、使用したい css クラスに font-family をコピペで追加します。

[style.css]
[style.css]

以上です。

広告

無料体験に参加するだけでも何かを得られるかもしれない。
何かを変えたければ一歩を踏み出してみよう。

どこよりも高い「継続率」「修了率」「卒業率」の【WebCamp】
にほんブログ村 IT技術ブログ WordPressへ