AFFINGER6で簡単！Google Fonts導入・設定ガイド（初心者向け）

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

AFFINGER6なら、Google Fontsを使ったフォント変更も意外と簡単。
この記事では「どこをどう設定すればいいのか」を初心者向けに整理してご紹介します。

Question

AFFINGER6でフォントを変えたいけど、設定が難しそう…
Google Fontsって聞いたことはあるけど、何を選べばいいの？
コードを貼るって書いてあるけど、どこに入れるのか分からない…

ブログのフォントを変えるだけで、サイト全体の印象は大きく変わります。
AFFINGER6では、Google Fontsを使って好みのフォントを簡単に導入できますが…
「設定が難しそう」「コードが必要そうで不安」
…と感じる方も多いのではないでしょうか。

この記事では、AFFINGER6でGoogle Fontsを設定する手順を、初心者の方でも迷わないように画面の流れに沿って解説します。
フォントの選び方から設定方法まで、順番に確認していきましょう。

こんな方におすすめ！

AFFINGER6でサイトのフォントを変更してみたい
Google Fontsを使って、ブログのデザインを少し整えたい初心者さん
フォント設定に挑戦したいけど、どこをどう設定すればいいか分からない
コードの扱いに不安があり、なるべく簡単な方法で設定したい

この記事でわかること！

AFFINGER6でGoogle Fontsを導入・設定する基本手順
Google Fontsの選び方とフォントコードの取得方法
取得したフォントをAFFINGER6の管理画面に反映する方法

それではご覧ください。

Google Fontsとは？AFFINGER6で使うメリット

Google Fonts（グーグルフォント）とは、Googleが無料で提供しているWebフォントサービスです。
日本語フォント・英字フォントともに種類が豊富で、商用利用も可能なため、ブログやWebサイトでも安心して使えます。

AFFINGER6では、このGoogle Fontsを使って、サイト全体のフォントを自分好みに変更できます。

AFFINGER6でGoogle Fontsを使う主なメリット

サイトの印象を簡単に変えられる

フォントを変えるだけで、「やさしい雰囲気」「シンプル」「読みやすい」など、サイトの印象が大きく変わります。

デザインが苦手な方でも、フォント変更は取り入れやすいカスタマイズです。

無料・コードコピーだけで使える

Google Fontsはすべて無料。
専用のフォントファイルを用意する必要はなく、表示されたコードをコピーして貼り付けるだけで使えます。

AFFINGER6は設定場所が分かりやすい

AFFINGER6には、フォント設定用の入力欄が用意されているため、HTMLやCSSを細かく書く必要はありません。
初心者でも手順通り進めれば問題なく設定できます。

AFFINGER6でGoogle Fontsを設定する前の注意点

Google Fontsはとても便利ですが、設定する前にいくつか知っておきたいポイントがあります。
あらかじめ確認しておくことで、「反映されない」「表示が崩れた」といったトラブルを防げます。

日本語フォントと英字フォントは別で考える

Google Fontsには、日本語対応フォントと英字フォントがあります。
英字フォントのみを設定した場合、日本語部分はデフォルトフォントのまま表示されることがあります。

そのため、日本語ブログの場合は「日本語対応フォント」を選ぶのが基本です。
（例：Noto Sans JP など）

フォントを入れすぎない

Google Fontsは複数設定できますが、フォントの種類を増やしすぎると、ページの表示速度に影響することがあります。

初心者の方は…

メインフォント：1種類
装飾用（必要なら）：1種類

この程度に抑えるのがおすすめです。

設定後はキャッシュを確認する

フォントを設定しても、すぐに見た目が変わらないことがあります。
その場合は、以下を確認してみてください。

ブラウザのキャッシュ
WordPressやサーバーのキャッシュ機能
シークレットモードでの表示

キャッシュが原因で、正しく設定できていても反映されていないように見えるケースは意外と多いです。

Google Fontsでフォントを選んでコードを取得する手順

ここからは、Google Fontsの公式サイトでフォントを選び、AFFINGER6で使うためのコードを取得する手順を解説します。

Google Fontsの公式サイトを開く

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

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

: Browse Fonts - Google Fonts

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

fonts.google.com

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

主な操作は、赤枠部です。（上部の検索窓・左側の表示設定メニュー）
大きさを変えたり、スタイルを直感的に選べます。「ちょっと触るとイメージがわかりますよ」

Google Fonts公式サイト（fonts.google.com）のトップページ画面

フォント名がわかっている場合は、検索欄にフォント名を直接入れれば「OK」です。

それでは、次にフォントの検索手順の一例をご紹介します。

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

日本語ブログで使う場合は、日本語対応フォントを選びましょう。
画面左側（または上部）の絞り込み項目から、「Language」→「Japanese」を選択します。

これで、日本語に対応したフォントのみが表示されます。

日本語フォントを検索する方法（例）

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

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

使いたいフォントを選択する

一覧の中から、使いたいフォントをクリックします。初心者の方は、以下のような基準で選ぶと失敗しにくいです。

文字が読みやすい
装飾が強すぎない
ブログ全体で使っても違和感がない

日本語フォントの検索一覧が表示されます。

フィーリング（左）やスクロールでお好みのフォントを選択してクリックします。

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

フォントを選択してコードを表示する

フォントの詳細画面を開いたら、右上にある「Get font」をクリックします。

以下のサンプルでは、『IBM Plex Sans JP』を選択しています。

右上の『Get font』をクリックします。

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

フォントファミリーセレクト画面が表示されます。

右側の『Get embed code』をクリックすると、フォントを読み込むためのコードが表示されます。

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

読み込み用のコードをコピーする

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

右赤破線部の『webタブの<link>』から『HTMLとCSS class』の一部を抜粋してコピーします。

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

『html・CSS class』の抜粋詳細

以下の画面は、上の画面に表示された赤い破線部分を拡大したものです。

htmlとCSS classに黄色くマーキングした部分をそれぞれコピーします。
（このコードを、次の手順でAFFINGER6の管理画面に貼り付けます）

埋め込みコードの拡大画面で、webタブの<link>からHTMLとCSS classのコードをコピーしている画面

抜粋したコードは、AFFINGER管理画面の「A フォントの種類」にペーストします。

AFFINGER6管理画面でGoogle Fontsを設定する方法

ここからは、先ほどコピーしたGoogle FontsのコードをAFFINGER6の管理画面に貼り付けて実際にフォントを反映させていきます。

WordPress管理画面からAFFINGER管理画面を開く

まずは、WordPressの管理画面にログインし、AFFINGER管理画面を開いて詳細メニューへ進みます。

Menu 『WordPress管理＞ダッシュボード＞AFFINGER管理』をクリックします。

「A フォント」設定画面を開く

AFFINGER管理画面が開いたら、左側の「全体設定」タブをクリックすると以下の画面が表示されます。

『下側にスクロールする』か『A フォントの種類』をクリックして、『A フォントの種類』の表示位置まで移動します。

WordPress管理画面で「AFFINGER管理」から「全体設定」へ進む操作画面

Google Fontsのコードを貼り付ける

ここが、Google Fontsを含むフォント設定を行う画面です。

『A フォントの種類』は以下のように表示されます。

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

赤枠部（全3箇所）
- Google Fontsの CSS classコードを抜粋して入力します。
- Google Fontsを反映させたい『その他（優先）』（2箇所）は、標準フォントと選択できます。
青枠部
- Google Fontsの htmlコードを抜粋して入力します。
赤破線部
- 個別に反映したい箇所を選択して追加できます。

AFFINGER管理画面の全体設定にある「Googleフォント反映場所」の設定画面

「HTML・CSS class」の抜粋コードをAFFINGER管理画面に貼り付ける（例）

設定箇所が分かったら、実際の設定例を確認してみましょう。まずは、Google Fontsから抜粋したコードの内容を見ていきます。（ここではサンプルとして「IBM Plex Sans JP」を使用しています）

青枠部のコード（html）

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

赤枠部のコード（CSS class）

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

以下にチェックを入れましょう。

Googleフォントに「display=swap」を付与（表示速度改善）

以下の画面は、必要な項目にチェックを入れ、フォントを適用したい箇所に「HTML」と「CSS class」を入力した設定例です。

設定を保存する

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

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

サイト表示を確認する

設定を保存したら、実際にサイトを表示して、フォントが変更されているかを確認します。

もし反映されていない場合は、ブラウザの更新やキャッシュクリアも試してみてください。

AFFINGER管理画面のCSSペーストに関する補足

A フォントの種類→『その他（優先）』

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

上の2箇所で、標準フォントを選択して使う場合は、CSSコードを空欄にします。

また、Googleフォントの反映箇所を個別に設定できる項目があるので、細かい設定はそこで行います。
また、Googleフォントの反映箇所を個別に設定できる項目があるので、細かい設定はそこで行います。
（AFFINGER管理画面の画像で、赤破線部でマーキングしている箇所です）

まとめ！AFFINGER6ならGoogle Fontsの設定は意外と簡単

AFFINGER6では、Google Fontsを使ってサイトのフォントを手軽に変更できます。
一見むずかしそうに感じますが、実際の作業はフォントを選んでコードをコピーし、管理画面に貼り付けるだけです。

この記事では…

Google Fontsで日本語フォントを選ぶ方法
必要なHTML・CSS classコードの取得手順
AFFINGER6管理画面での具体的な設定方法

を、画面の流れに沿って解説しました。

フォントを変更するだけでも、サイトの読みやすさや印象は大きく変わります。
まずは1種類のフォントから試してみて、自分のブログに合うデザインを少しずつ整えてみてください。

AFFINGER6を使っている方で、「フォントを変えてみたい」「デザインをもう一段よくしたい」と感じているなら、Google Fontsの導入は取り入れやすいカスタマイズのひとつです。

この記事がお役に立てば嬉しいです。

「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。＼^^／