カスタマイズ

AFFINGER7でGoogle Fontsを設定する方法｜フォント変更の手順

AFFINGER7でGoogle Fontsを設定してフォントを変更する方法を解説

こんにちは "osaboo"です。"@osaboo_Bot"

この記事で解決できる悩み

  • AFFINGER7でGoogle Fontsを設定する方法がわからない
  • Google Fontsのフォントコードの取得方法がわからない
  • サイトの見出しや本文のフォントを変更したい
  • Google Fontsが反映されないときの対処法を知りたい

この記事では、Google Fontsの選び方からコードの取得、AFFINGER7での設定方法、反映されないときの対処法まで解説します。

「まずはブログを始めたい！」という方は、『WordPressブログ完全ガイド』をご覧ください。
開設から運営・収益化までを初心者向けに画像付きでわかりやすく解説しています。

＼初心者でも安心！ コスパ最強のWordPressテーマ／

AFFINGER7（通常版）でブログを始める

＼効果測定に必要なプラグインをまとめた特別セット／

STRATEGY PACK3で収益化を加速する

関連記事 AFFINGER7の基本設定を済ませていない場合は、初期設定の手順も確認しておきましょう。

AFFINGER7の初期設定方法を初心者向けに解説
AFFINGER7の初期設定完全ガイド｜導入後に最初にやるべき設定を初心者向けに解説

AFFINGER7の初期設定を初心者向けにわかりやすく解説。設定画面の場所から導入後に最初にやるべき設定、おすすめ設定、SEOやアフィリエイトに役立つ設定まで順番に紹介します。

AFFINGER7でGoogle Fontsを使う前の確認事項

Google Fontsを使うと、サイトのフォントを自由にカスタマイズできます。設定前に、メリットや表示速度への影響、日本語フォントを選ぶ際の注意点を確認しておきましょう。

Google Fontsとは？

Google Fontsは、Webサイトで使用できる無料のフォントを提供するサービスです。日本語フォントにも対応しており、サイトの見出しや本文のデザインを変更できます。

AFFINGER7では、Google Fontsを設定することで、サイト全体のフォントを好みに合わせてカスタマイズできます。

Google Fontsを使うメリット

Google Fontsを導入すると、標準フォントとは異なる書体を使い、サイトの雰囲気や文字の印象を変えられます。

  • デザイン性の向上： サイトの雰囲気に合ったフォントを選べる
  • 読みやすさの調整： 見出しや本文に適した書体を使える
  • 統一感のあるデザイン： サイト全体の文字の印象をそろえられる

フォントを変更するとサイトの印象が変わるので、読みやすさを優先して選ぶことが大切です。

Google Fontsを使う際の注意点

Google Fontsは、フォントの読み込みによってページの表示速度に影響する場合があります。特に、日本語フォントは文字の種類が多く、読み込むデータ量が大きくなることがあります。

導入する際は、次の点を意識しましょう。

  • 使用するフォントの種類を必要最小限にする
  • 必要なウェイト（文字の太さ）だけを読み込む
  • 設定後はページの表示速度や文字の見え方を確認する

また、AFFINGER7の「表示速度優先（β）」を有効にしている場合は、Google Fontsが使用できないことがあります。設定が反映されない場合は、この項目も確認してください。

Google Fontsでフォントコードを取得する方法

Google Fontsの公式サイトでフォントを選び、AFFINGER7で設定するためのコードを取得する手順を解説します。

Google Fonts公式サイトを開く

まずは、Google Fontsの公式サイト（ fonts.google.com）を開きます。
トップページには、利用できるフォントの一覧が表示されます。

ここでは、AFFINGER7の管理画面にある「A フォント」設定で使用するためのフォントコードを、Google Fontsから取得していきます。

Browse Fonts - Google Fonts
Browse Fonts - Google Fonts

Making the web more beautiful, fast, and open through great ...

続きを見る

上のリンクカードをクリックするとGoogle Fontsに遷移し、以下の画面が表示されます。

主な操作は、赤枠部です。（上部の検索窓・左側の表示設定メニュー）
大きさを変えたり、スタイルを直感的に選べます。

Google Fonts公式サイト（fonts.google.com）のトップページ画面
  • フォント名がわかっている場合は、検索欄にフォント名を直接入れれば「OK」です。

日本語フォントを絞り込む

日本語ブログで使用する場合は、日本語に対応したフォントを選びましょう。

画面左側（または上部）の絞り込み項目から、「Language」→「Japanese」 を選択すると、日本語対応フォントを探せます。

日本語フォントを検索する手順（参考）

画面上部の検索窓に 「j」 と入力し、表示されるドロップダウンメニューから「japanese」 をクリックします。

Google Fonts公式サイト（fonts.google.com）で日本語フォントに絞り込んでいる画面

Google Fontsの検索

日本語フォントの一覧が表示されます。左側のフィーリングやスクロールでフォントを探し、好みのフォントをクリックして選択します。

Google Fonts公式サイト（fonts.google.com）で日本語フォントを選択している画面
yajirusi-sita-80x40

サンプルでは、『IBM Plex Sans JP』を選択し、画面右上の『Get font』をクリックします。

Google Fonts公式サイトで「IBM Plex Sans JP」を選択している画面

埋め込みコードを取得

フォントファミリーセレクト画面が表示されたら、右側の『Get embed code』をクリックします。

フォントファミリーセレクト画面で、右側の「Get embed code」をクリックしている画面
yajirusi-sita-80x40

埋め込みコードの詳細画面が表示されます。

右側の赤い破線で囲まれた『Web』タブの <link> コードから、必要な部分を抜き出してコピーします。

「HTMLとCSS class」の設定に使用します。

埋め込みコードの詳細画面で、webタブのからHTMLとCSS classのコードをコピーしている画面

埋め込みコードの必要箇所 → 「HTMLとCSS class」

  • マーキングした部分を、AFFINGER7の設定画面に入力します。
埋め込みコードの拡大画面で、webタブのからHTMLとCSS classのコードをコピーしている画面

サンプルでは、以下のHTMLコードとCSS classを取得し、AFFINGER7の設定画面に入力します。

html

https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+JP:wght@500&display=swap

CSS class

font-family: "IBM Plex Sans JP", serif;

AFFINGER7でGoogle Fontsを設定する方法

Google Fontsで取得したコードを、AFFINGER7の管理画面に設定します。フォントの種類や適用箇所を指定し、サイトに正しく反映されるか確認しましょう。

AFFINGER管理画面から「A フォントの種類」を開く

WordPress管理画面から、次の順番で設定画面を開きます。

Menu『WordPress管理画面 → AFFINGER管理 → 全体設定』をクリックします。

以下の画面が表示されたら、「A フォントの種類」までスクロールします。

AFFINGER管理の全体設定

この画面で、Google Fontsの読み込み設定やフォントを適用する箇所を指定できます。

AFFINGER管理の全体設定でAフォントの種類を設定する画面

Google Fontsのコードを設定する

Google Fontsで取得したHTMLコードとCSS classを、それぞれ対応する入力欄に設定します。

サンプルでは「IBM Plex Sans JP」を使用します。取得したコードを確認し、AFFINGER7の各入力欄に必要な部分を入力してください。

主な設定箇所は以下の通りです。

  • Googleフォントに「display=swap」を付与（表示速度改善）
    • チェックを入れましょう
  • 全3箇所
    • Google FontsのCSS classコードから必要な部分を抜き出し、入力欄に設定します。
    • Google Fontsを適用したい箇所は、「その他（優先）」の2つの設定項目から選択できます。標準フォントとGoogle Fontsを使い分けることも可能です。
  • 青枠部
    • Google FontsのHTMLコードから必要な部分を抜き出し、入力欄に設定します。
  • 赤破線部
    • フォントを反映させたい箇所を個別に選択し、追加できます。
AFFINGER管理画面の全体設定で「A フォントの種類」を設定する画面
AFFINGER管理画面の全体設定にある「Googleフォント反映場所」の設定画面

コードを貼り付けたら、画面下部（または上部）にある『Save』をクリックして設定を保存します。

Save（保存）を忘れると反映されないので、必ず最後に確認しましょう。

AFFINGER7の「Save」ボタン

補足：「その他（優先）」の設定について

「A フォントの種類」→「その他（優先）」では、次の2箇所にフォントを設定できます。

  • 全体
  • 記事タイトル・見出し（h2～3）・ウィジェットボタンなど

標準フォントを使用する場合は、該当するCSSコード欄を空欄にします。Google Fontsを適用したい箇所には、必要なコードを入力してください。

関連記事 AFFINGER7の表示速度に関する設定は、その他の設定ガイドで詳しく解説しています。

AFFINGER7のその他の設定を解説
AFFINGER7のその他の設定を解説｜使い方とおすすめ設定

AFFINGER7の「その他の設定」を初心者向けに解説。外部リンク、ウィジェット、検索結果、演出、遅延読込、CSSキャッシュなどの設定方法とおすすめ設定を紹介します。

Google Fontsが反映されないときの対処法

AFFINGER7でGoogle Fontsを設定してもフォントが変わらない場合は、コードの入力内容や設定項目を確認しましょう。

HTMLコードとCSS classを確認する

Google Fontsから取得したコードに誤りがあると、フォントが正しく読み込まれない場合があります。

  • HTMLコードが正しく入力されているか
  • CSS classに必要なコードが入力されているか
  • フォント名や記号が正しく記述されているか

入力内容を見直し、設定を保存してから再度表示を確認してください。

フォントの適用箇所を確認する

AFFINGER7では、Google Fontsを適用する箇所を個別に設定できます。

フォントが変わらない場合は、「A フォントの種類」の設定を開き、Google Fontsを適用したい箇所が正しく選択されているか確認しましょう。

キャッシュをクリアする

設定を変更しても表示が変わらない場合は、キャッシュが影響している可能性があります。

次の手順で確認してください。

  1. ブラウザを再読み込みする
  2. ブラウザのキャッシュをクリアする
  3. キャッシュ系プラグインを使用している場合は、キャッシュを削除する

キャッシュを削除したら、サイトを再表示してフォントを確認します。

「表示速度優先（β）」の設定を確認する

AFFINGER7の「表示速度優先（β）」が有効になっている場合、Google Fontsが使用できないことがあります。

Google Fontsが反映されない場合は、AFFINGER管理画面で該当項目の設定状態を確認してください。

表示速度を優先するか、Google Fontsでデザインを調整するか、サイトの目的に合わせて選びましょう。

おすすめ Google Fonts（3選）

IBM Plex Sans JP：IBMが提供するプロフェッショナルな日本語フォント

IBM Plex Sans JP - Google Fonts
IBM Plex Sans JP - Google Fonts

IBM Plex® is the corporate typeface for IBM worldwide and an ...

続きを見る

『Medium 500』がいい感じだと思います。

参考コード抜粋

https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+JP:wght@500&display=swap
font-family: "IBM Plex Sans JP", serif;

M PLUS 1p：汎用性の高い洗練された日本語フォント

M PLUS 1p - Google Fonts
M PLUS 1p - Google Fonts

The M+ Outline Fonts Project develops a superfamily set of s ...

続きを見る

組み合わせがたくさんあるので色々選べます。

参考コード抜粋

https://fonts.googleapis.com/css2?family=Hachi+Maru+Pop&family=IBM+Plex+Sans+JP:wght@500&family=M+PLUS+1p&family=Roboto:wght@500&display=swap
font-family: "Roboto", serif;

Kiwi Maru：親しみやすさと可愛らしさを兼ね備えたフォント

Kiwi Maru - Google Fonts
Kiwi Maru - Google Fonts

Kiwi Maru was created mainly for use in digital devices, and ...

続きを見る

参考コード抜粋

https://fonts.googleapis.com/css2?family=Kiwi+Maru&display=swap
font-family: "Kiwi Maru", serif;

関連記事 フォントと合わせてサイトの配色も整えたい場合は、全体カラーの設定方法も参考にしてください。

AFFINGER7のカスタマイザー「全体カラー設定」でキーカラー・メインカラー・サブカラー・テキスト・アクセントカラーを解説
AFFINGER7の全体カラー設定方法｜サイト全体の色を一括変更する手順

AFFINGER7の全体カラー設定方法を初心者向けに解説。サイト全体の色を一括変更する手順や、キーカラー・メインカラーの役割、AFFINGER管理のカラーパターンとの違い、カラーが反映されない場合の対処法まで分かりやすく紹介します。

まとめ！AFFINGER7でGoogle Fontsを設定する方法｜フォント変更の手順

AFFINGER7では、Google FontsのHTMLコードとCSS classを設定することで、サイトのフォントをカスタマイズできます。

設定する際は、次のポイントを押さえておきましょう。

  • Google Fontsで日本語対応フォントを選ぶ
  • HTMLコードとCSS classを取得して設定する
  • フォントの適用箇所を個別に指定する
  • 設定後はサイトを表示して反映を確認する

Google Fontsを使用すると、サイトの雰囲気や文字の印象を調整できます。読みやすさと表示速度のバランスを考えながら、自分のサイトに合ったフォントを設定しましょう。

AFFINGER7をまだ導入していない方へ
＼ 本格的にブログ収益化を目指すなら、AFFINGER7はかなり有力な選択肢です。／

AFFINGER7は本当に稼げる？レビューをチェック

AFFINGER7とEXどっち？違いと選び方を今すぐチェック

＼初心者でも安心！ コスパ最強のWordPressテーマ／

AFFINGER7（通常版）でブログを始める

＼効果測定に必要なプラグインをまとめた特別セット／

STRATEGY PACK3で収益化を加速する

-カスタマイズ
-, ,