テーマの変更に伴いレイアウトが崩れておりますが、閲覧には問題ありません

【2021年版】「Google Fonts」の使い方【Webフォント】

こんにちは!マーク(@marklog0323)です。

この記事では、Googleが提供する無料のフォントサービス「Google Fonts」の使い方を解説します。

「Google Fonts」のフォントをPCにインストールする方法と、WebフォントとしてWebサイトやWordPressで使う方法を紹介しますね。

目次

「Google Fonts」をPCにインストールする方法

「Google Fonts」をPCにインストールすると、WordやExcel、Photoshopなどのアプリでもフォントを使えるようになります。

[st-timeline myclass=”” add_style=””]
[st-timeline-list text=”STEP.1″ myclass=”” fontsize=”” fontweight=”bold” color=”#999999″ bgcolor=”” center=””]

[st-div class=”ml-balloon” margin=”” padding=”” add_style=””]

まずは、日本語のフォントだけを表示させましょう。「Google Fonts」にアクセスし、左上の[Language]をクリックして[Japanese]を選びます。

[/st-div]

[/st-timeline-list]
[st-timeline-list text=”STEP.2″ myclass=”” fontsize=”” fontweight=”bold” color=”#999999″ bgcolor=”” center=””]

[st-div class=”ml-balloon” margin=”” padding=”” add_style=””]

表示されたフォントの中から、希望のフォントを選びます。今回は[Noto Serif Japanese]を選びました。

[/st-div]

[/st-timeline-list]
[st-timeline-list text=”STEP.3″ myclass=”” fontsize=”” fontweight=”bold” color=”#999999″ bgcolor=”” center=””]

[st-div class=”ml-balloon” margin=”” padding=”” add_style=””]

右上の[Download Family]をクリックすると、圧縮ファイル(ZIPファイル)のダウンロードが始まります。

[/st-div]

[/st-timeline-list]
[st-timeline-list text=”STEP.4″ myclass=”” fontsize=”” fontweight=”bold” color=”#999999″ bgcolor=”” center=””]

[st-div class=”ml-balloon” margin=”” padding=”” add_style=””]

ZIPファイルの中には、フォント(OTFファイル)が入っています。適当な場所に解凍し、すべてのOTFファイルを選択し、右クリックして[インストール]を選びましょう。インストールしたら、解凍したファイルはすべて削除してOKです。

[/st-div]

[/st-timeline-list]
[/st-timeline]

[st-kaiwa1 r]

インストールはすぐに終わる。終わったら、もう他のアプリで「Google Fonts」のフォントを使えるようになってるよ。

[/st-kaiwa1]

Webフォントとして使う方法

Webフォントとして設定すれば、WebサイトやWordPressでも「Google Fonts」を使うことができます。「Google Fonts」をインストールしていないPCでも、設定したフォントが表示されるのがメリットです。

Google Fonts」にアクセスして、希望のフォントを選ぶところまでは、フォントをPCにインストールする手順と同じです。

[st-timeline myclass=”” add_style=””]
[st-timeline-list text=”STEP.1″ myclass=”” fontsize=”” fontweight=”bold” color=”#999999″ bgcolor=”” center=””]

[st-div class=”ml-balloon” margin=”” padding=”” add_style=””]

まずは、日本語のフォントだけを表示させましょう。「Google Fonts」にアクセスし、左上の[Language]をクリックして[Japanese]を選びます。

[/st-div]

[/st-timeline-list]
[st-timeline-list text=”STEP.2″ myclass=”” fontsize=”” fontweight=”bold” color=”#999999″ bgcolor=”” center=””]

[st-div class=”ml-balloon” margin=”” padding=”” add_style=””]

表示されたフォントの中から、希望のフォントを選びます。今回は[Noto Serif Japanese]を選びました。

[/st-div]

[/st-timeline-list]
[st-timeline-list text=”STEP.3″ myclass=”” fontsize=”” fontweight=”bold” color=”#999999″ bgcolor=”” center=””]

[st-div class=”ml-balloon” margin=”” padding=”” add_style=””]

下にスクロールすると「Styles」という、利用できる太さが一覧で表示されている項目があります。希望の太さの右側にある[Select this style]をクリックします。

[/st-div]

[/st-timeline-list]
[st-timeline-list text=”STEP.4″ myclass=”” fontsize=”” fontweight=”bold” color=”#999999″ bgcolor=”” center=””]

[st-div class=”ml-balloon” margin=”” padding=”” add_style=””]

右側からスライドしてくる「Review」に、選んだフォントの種類と太さが表示されます。その下に、画像のような赤い枠で囲った文字列が表示されます。上の文字列は<head>と</head>の間(</head>の直前が無難)にコピペします。

下の文字列はCSSです。フォントを適用したい要素に、font-familyを指定しましょう。

[/st-div]

[/st-timeline-list]
[/st-timeline]

WordPressの<head>の場所

WordPressの場合、<head>タグはheader.phpにあります。管理画面から[外観]→[テーマエディター]に進み、右側のテーマファイルからheader.phpを探しましょう。ただし、PHPファイルの編集は、初心者にはおすすめしません。

最近のWordPressテーマは、PHPファイルを編集しなくても「Google Fonts」を簡単に設定できるものが多いので、まずはテーマの機能を確認してみましょう。


「AFFINGER6」でWebフォントとして使う方法

このブログで使ってるWordPressテーマ「AFFINGER6」では、「Google Fonts」を簡単に設定することができます。「AFFINGER6」で「Google Fonts」を使う方法を紹介します。

Google Fonts」にアクセスして、使いたいフォントの種類、太さを選ぶところまでは同じです。

[st-timeline myclass=”” add_style=””]
[st-timeline-list text=”STEP.1″ myclass=”” fontsize=”” fontweight=”bold” color=”#999999″ bgcolor=”” center=””]

[st-div class=”ml-balloon” margin=”” padding=”” add_style=””]

WordPress管理画面から[AFFINGER 管理]→[全体設定]と進み、下のほうの「フォントの種類」という項目に「Googleフォント」の設定をする箇所があります。

入力するのは、画像の2ヶ所です。

[/st-div]

[/st-timeline-list]
[st-timeline-list text=”STEP.2″ myclass=”” fontsize=”” fontweight=”bold” color=”#999999″ bgcolor=”” center=””]

[st-div class=”ml-balloon” margin=”” padding=”” add_style=””]

上の枠には「https://」から始まるURL部分のみを、

下の枠には「font-family:」から始まる文言をすべて入力します。

[/st-div]

[/st-timeline-list]
[st-timeline-list text=”STEP.3″ myclass=”” fontsize=”” fontweight=”bold” color=”#999999″ bgcolor=”” center=””]

[st-div class=”ml-balloon” margin=”” padding=”” add_style=””]

すぐ下に「Google Fonts」をどこに適用するか、チェックを入れる項目があります。適用したい項目にチェックを入れ、[Save]を押したら設定完了です。

[/st-div]

[/st-timeline-list]
[/st-timeline]

[st-kaiwa1 r]

やっぱりテーマに「Google Fonts」を設定する機能がついてると便利。圧倒的に簡単。

[/st-kaiwa1]

おわりに

Windowsに最初から入っているフォントはデザイン向きではないものが多いので、「Google Fonts」を使えるとめちゃくちゃ便利です。

ブログの記事のアイキャッチや見出し、動画のサムネイルなどに活躍してくれます。ブログの見出しはフォントを変えるだけで、ブログ全体の印象がグッと変わりますからね。

おすすめ、というか定番のフォントは別の記事で紹介してるので、よかったらそちらもご覧ください。

あわせて読みたい
【商用利用可】おすすめのド定番日本語フリーフォント3選 こんにちは!マーク(@marklog0323)です。 ブログのタイトルロゴや、記事のアイキャッチ画像をつくるとき、どのフォントにしようか迷ったことはありませんか? 私は定...
関連記事
[st-kaiwa1 r]

追加のフォントは「Google Fonts」だけで十分だと思ってるよ。

[/st-kaiwa1]
よかったらシェアしてね!

この記事を書いた人

ゲーム・漫画・アニメが好きなブロガーです。アフィリエイトで月40万達成。永遠のオタクです。

目次
閉じる