無料で超絶おしゃれなGoogleフォント!使い方を画像で説明。手書き風や日本語も!

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

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

ブログ運営に慣れてくると、デザインが気になってきますね。

そうなると、おしゃれな文字を使ってみたくなるのが人情ってもんです!

たとえば、下の画像のようなフォントだって表示させることができるんです!

上の例はちょっと斬新ですが、実際にこうした文字なんかを簡単に表示できるんです。

他のサイトとは一味違った雰囲気を演出できそうで楽しいですよね。

これはどうやって表示させているかというと、無料のGoogleフォントを利用してます。

このGoogleフォントには主にアルファベットですが、上の画像のような日本語フォントや手書き風のものもあります。

また、色やサイズも調整できるので重宝すること間違いなし!

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

え?使うのが難しそう?

大丈夫!心配いりません!

画像付きで丁寧に、そして難しい設定をなるべく避けながら、最短距離で説明していきます!

また、『Webフォントって何ぞ?』なんていう、そもそも論は可能な限り省略して、単刀直入に本題に入ります。

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

WordPressでの利用を想定していますが、基本的な考え方はどのサイトでも同様です。

無料・超絶おしゃれフォントのための作業概要

まずはどんな作業が必要なのか、ザックリとその概要を説明します。

  •  手順1.Google Fontsにアクセス
  •  手順2.お好みのフォントに関するコードをコピー
  •  手順3.WordPressの該当箇所にコピーしたコードを貼り付け
  •  手順4.完成!
コードやWordPressの該当箇所についても画像付きで分かりやすく説明します。この段階では深く考えなくてもOKです。

googleフォントの使い方:準備するもの

さて、いよいよ下準備にとりかかります。最初は時間がかかりますが、慣れれば2、3分でできますよ。

手順1.Google Fontsにアクセス

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

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

赤枠の『Sentence』欄に任意の文章を入力すると、実際の表示状態をプレビューすることができます。なお、日本語を入力したときにプレビューされないフォントは、日本語に対応していませんのでご注意ください。

Google Fontsのトップ画面

手順2.フォントに関するコードをコピー

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

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

 

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

 

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

 

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

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

 

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

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

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

いざ、Googleフォントを使う!無料でおしゃれな手書き風フォントまでもう少し。

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

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

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

この手順3を行う前にまず、WordPressの管理画面からheader.php、ウィジェット画面を開いておきましょう。
それぞれについて説明しますね。

Googleフォントのコードを貼り付ける

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

ダッシュボードの『テーマエディター』から、子テーマのheader.phpファイルを開きましょう。この時、念のためにheader.phpのバックアップを取っておきましょう!

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

 

さて、子テーマのheader.phpファイルを開いたら、先ほどの<link>のコードをコピーしてください。

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

私は<head>タグの一番お尻の部分である</head>のすぐ上に貼り付けました。この作業により、Googleフォントの読み込みが完了します。

ウィジェットを開く

ここまでの作業によりGoogleフォントの読み込みが完了したら、その次は、WordPress側での表示設定に移ります。
まず、ダッシュボードからウィジェットを開きましょう。
Googleフォントを表示させたいウィジェットエリアに『カスタムHTML』ウィジェットを入れてください。
そして、再びGoogleフォントの画面を開き、赤枠内をコピーしましょう。
『カスタムHTML』の『内容』欄にコピーしたものを貼り付け、その前後に次のような青の文字列を付け加えてください。なお、ABCDの箇所は表示させたい文字列です。お好きな文字列をどうぞ!
<p style=”font-family: ‘Alata’, sans-serif;“>ABCDE</p>
実際には↓のような感じになります。
これでやっと全ての作業が終わりました!
[F5]キーか更新ボタンを押して画面をリロードしてみると、このフォントでABCDと表示されているハズです。
これで作業はすべて完了です!どうもお疲れさまでした!
また、文字のサイズや色を装飾したい場合は次のようにしてください。
<p style=”font-family: ‘Alata’, sans-serif; font-size: 60px; color:#ffffff;”>ABCDE</p>
これは、フォントサイズ60px、フォントカラーが白の場合の指定方法です。
もっと細かく装飾することも可能なので、『CSS 文字 装飾』などで調べると細かい内容が分かるはずです。
また、もしこのフォントでの表示が不要になったら、このウィジェットごと削除するか、ABCDE以外の部分を消せばOKです。
<p style=”font-family: ‘Alata’, sans-serif; font-size: 60px; color:#ffffff;”>ABCDE</p>

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

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

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

さて、Google Fontsの利用方法には実はもう一つあります。
追加CSSに追記する方法ですが、これは中級者向けなので今回は割愛しました。
画像付きで説明するととても大変な作業に見えますが、実際にはマウス操作をカチカチするだけです。
これを2~3回ほど繰り返すと、作業時間も1/10くらいに短縮できるはずです。
また、Google FontsにはGoogle Fonts + Japanese』という日本語バージョンもあります。
こちらには現在9つのフォントしか掲載されていませんが、ユニークなものばかりです。こちらの使い方は後日公開予定です。
ではみなさん、素晴らしきフォントの世界を大いに楽しみましょう!
最新情報をチェックしよう!