Google Fonts日本語の使い方。おすすめは手書き風フォント

2021 6/28

2021.06.28

みなさん、WordPressでブログやってますか？

ブログ運営に慣れてくると、おしゃれな文字を使ってみたくなりませんか？

Google Fontsを利用すると、下のようなフォントだって表示させることができるようになります！

Webフォントなので、使用端末によって文字化けすることもありません。

900種類以上の様々なフォントを使用できる『Google Fonts』を使いこなしましょう！

この記事の内容

おしゃれな文字を無料で利用できるGoogle Fontsの使い方を画像付きで説明します。

業界歴9年のWeb解析士。GAIQ保有。

ガラケー時代からSNSの仕事をしてました。

Twitterはこちら→ @yattoki_mashita

Google Fonts日本語の使い方：手順概要

まずはどんな手順が必要なのか、その概要を説明します。

手順１．Google Fontsにアクセス
手順２．お好みのフォントに関するコードをコピー
手順３．WordPressの該当箇所にコピーしたコードを貼り付け
手順４．完成！

Google Fonts日本語の使い方：準備するもの

さて、いよいよ下準備にとりかかります。

慣れないうちは時間がかかりますが、使っているうちに２、３分でできるようになりますよ。

手順１．Google Fontsにアクセス

まず、『Googleフォント』などの文言で検索してGoogle Fontsのサイトにアクセスしましょう。

すると下のような画面が表示されます。

赤枠の『Sentence』欄に任意の文章を入力すると、実際の表示状態をプレビューすることができます。

なお、日本語を入力したときにプレビューされないフォントは、日本語に対応していませんのでご注意ください。

手順２．フォントのコードをコピー

たくさんあるフォントの中から気に入ったものがあったら、そのフォントをクリックしてください。するとこんな画面になります。

今回の例では、『Alata』というフォントを選びました。

次に、赤枠内の『+ Select this style』をクリックしましょう。この時、フォントサイズや色などは気にしなくてもOKです。後で自由に設定できます。

すると、右にニョキっとサイドバー表示されますので、赤枠の『Embed』タブを押してください。

そして下の画像のように、『Embed』タブ内には<link>と@importの二つがあるので、<link>をクリックします。

その結果表示されているのがgoogleフォントを利用するために必要なコードです。

上の画面は開いたままにしておいてくださいね。この後の手順において、この画面とWordPressの設定画面を数回ほど往復します。

なお、@importを選択しても設定できますが、やや専門知識が必要なのでここでは割愛します。

はい、とりあえず下ごしらえは完了です。お疲れさまでした。

Google Fonts日本語の使い方を実践！手書き風フォントまでもう少し。

さて、これからいよいよ、表示設定を行っていきます。

手順が少し多めですが、もう一息ですので頑張りましょう！

手順３．WordPressの該当箇所にコードを貼り付け

WordPressをお使いの方ならおそらく、子テーマを使用していると思います。

ダッシュボードの『テーマエディター』から、子テーマのheader.phpファイルを開きましょう。

子テーマ内にheader.phpが存在しない場合は、親テーマから複製してください。

この時、念のためにheader.phpのバックアップを取っておいてください。

さて、子テーマのheader.phpファイルを開いたら、先ほどののコードをコピーしましょう。

コピーした内容は、子テーマのheader.php内の<head>タグ内の任意の場所に貼り付けてください。

私は<head>タグの一番お尻の部分である</head>のすぐ上に貼り付けました。

この作業により、Googleフォントの読み込みが完了します。

ウィジェットを開く

ここまでの作業によりGoogleフォントの読み込みが完了したら、その次は、WordPress側での表示設定に移ります。

まず、ダッシュボードからウィジェットを開きましょう。

Googleフォントを表示させたいウィジェットエリアに『カスタムHTML』ウィジェットを入れてください。

そして、再びGoogleフォントの画面を開き、赤枠内をコピーしましょう。

『カスタムHTML』の『内容』欄にコピーしたものを貼り付け、その前後に次のような青の文字列を付け加えてください。なお、ABCDの箇所は表示させたい文字列です。お好きな文字列をどうぞ！

ABCDE

実際には↓のような感じになります。

これでやっと全ての作業が終わりました！

[F5]キーか更新ボタンを押して画面をリロードしてみると、このフォントでABCDと表示されているハズです。

これで作業はすべて完了です！どうもお疲れさまでした！

また、文字のサイズや色を装飾したい場合は次のようにしてください。

ABCDE

これは、フォントサイズ60px、フォントカラーが白の場合の指定方法です。

もっと細かく装飾することも可能なので、『CSS 文字装飾』などで調べると細かい内容が分かるはずです。

また、もしこのフォントでの表示が不要になったら、このウィジェットごと削除するか、ABCDE以外の部分を消せばOKです。

ABCDE

もちろん、子テーマのheader.php内に追加した箇所も消しましょう。

そのままでも害はありませんが、残しておく理由もありませんし、コードがグチャグチャして気持ち悪くなってしまいます。

googleフォントの使い方：番外編

さて、Google Fontsの利用方法には実はもう一つあります。

追加CSSに追記する方法ですが、これは中級者向けなので今回は割愛しました。

画像付きで説明するととても大変な作業に見えますが、実際にはマウス操作をカチカチするだけです。

これを２～３回ほど繰り返すと、作業時間も1/10くらいに短縮できるはずです。

また、Google Fontsには『Google Fonts + Japanese』という日本語バージョンもあります。

こちらには現在9つのフォントしか掲載されていませんが、ユニークなものばかりです。

下の記事では、仕事や生活に役立つ様々なGoogleの使い方を画像多めで説明しています。

Google（グーグル）便利機能の活用方法｜PC・スマホ初心者、歓迎！

Google Fonts日本語の使い方。おすすめは手書き風フォント

Google Fonts日本語の使い方：手順概要