AFFINGER6で簡単！Google Fontsの設定方法を徹底解説【初心者向け】

AFFINGER管理画面を表示

AFFINGER管理画面を開いて詳細メニューへ進みます。

AFFINGER管理画面の全体タグを開く

左側の「全体設定」タブをクリックすると以下の画面が表示されます。

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

A フォントの種類『Google Fonts』の抜粋コードを入力し反映箇所を選択する

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

• すべての設定が完了したら『Save』をクリックします。

Google Fonts トップ画面の概要

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

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

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

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

Google Fontsの検索手順（例）

画面上部の検索窓に『j』と入力して、ドロップダウンメニューから『japanese』をクリックします。

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

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

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

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

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

右側の『Get embed code』をクリックします。

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

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

『html・CSS class』の抜粋詳細

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

htmlとCSS classに黄色くマーキングした部分をそれぞれコピーします。

『html・CSS class』の抜粋コードをAFFINGER管理画面でペーストする

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

AFFINGER管理画面に戻って、以下のようにペーストします。

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

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