Google Fontsの使い方 [フォレストページ＋] 夢小説対応・簡単オシャレな創作サイト作成サービス

Google Fontsの使い方

「自分でWebフォントをサイトに入れてみたい」そんな人向けの説明書です。
【2023/04/28追記】手順５「@import整形」の記述を修正しました

はじめに

CSS中級者向け
「CSSよくわからない」人は「webフォントおすすめ10パターン」を利用してね
このページに関してサポートはしません。説明が難しい場合は「webフォントおすすめ10パターン」をどうぞ
自分で試してうまく反映されない場合も「webフォントおすすめ10パターン」をどうぞ

1. フォントを選ぶ

今回はこれを使います↓
https://fonts.google.com/specimen/Amatic+SC

（→画像①【Google Fontsの使い方】）

「Regular 400」の［Select］をタップ

2. @import

右サイドバーが開きます
（→画像②【Google Fontsの使い方】）

「Use on the web」の［@import］をタップ

3. 使うテキストを確認

コピペする要素は２ヶ所あります
（→画像③【Google Fontsの使い方】）

画像③のAとB

何らかのメモ帳を開いて準備してください

4. @importコピー

@import直下のボックス、その右下にコピー用アイコンがあります。
アイコンをタップ
（→画像④【Google Fontsの使い方】）

※テキストを手動で選択してコピーすると、正しくコピーできません（iOSの場合アルファベット大文字が小文字になる）

用意したメモ帳にペースト

<style>

  @import url('https://fonts.googleapis.com/css2?family=Amatic+SC&display=swap');

</style>

5. @import整形

今回は<style>タグを削除します

@import url('https://fonts.googleapis.com/css2?family=Amatic+SC&display=swap');

何らかの理由によって、手順4で手動で選択コピーペーストした場合、以下の項目をチェックしてください

❌Amatic SC（半角スペースを入れない）

@import url('https://fonts.googleapis.com/css2?family=Amatic SC&display=swap');

❌amatic+sc（大文字小文字を確認）

@import url('https://fonts.googleapis.com/css2?family=amatic+sc&display=swap');

↓
⭕️Amatic+SC

@import url('https://fonts.googleapis.com/css2?family=Amatic+SC&display=swap');

⭕️フォレストページ＋の場合は複数フォントを一行にまとめて記述~~できません（最初のフォントだけ読み込まれる）~~
【2023/04/28追記】マイテーマCSS内のみ複数指定が有効です。共通HEADとマイテーマHEADでは複数指定が無効です。
family=Amatic+SC&family=Klee+One

@import url('https://fonts.googleapis.com/css2?family=Amatic+SC&family=Klee+One&display=swap');

↓
⭕️~~フォント1つにつき一行~~【2023/04/28追記】マイテーマCSS内ならば複数フォントを一行にまとめられます。

@import url('https://fonts.googleapis.com/css2?family=Amatic+SC&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Klee+One&display=swap');

6. font-familyコピー

CSS rules to specify families直下のボックス、その右下にコピー用アイコンがあります。
アイコンをタップ
（→画像⑤【Google Fontsの使い方】）

※今回は手動で選択コピーしても問題ありませんが、一応手順4と合わせます。

用意したメモ帳にペースト

@import url('https://fonts.googleapis.com/css2?family=Amatic+SC&display=swap');



font-family: 'Amatic SC', cursive;

かならず@importは一番上に、font-familyは@importより下に記述してください。

このままでは動作しないので整形します

7. font-family整形

ラテ式CSSでは、以下の変数でフォントを指定します。

--logo-alphabet：欧文フォント/サイト名や見出し
--logo-kanji：和文フォント/サイト名や見出し
--sub-alphabet：欧文フォント/本文・ナビゲーションリンク・フッターリンク

（→画像⑥【Google Fontsの使い方】）

今回はサイト名や見出しにAmatic SCを適用します。

変数--logo-alphabetをbodyで囲う

@import url('https://fonts.googleapis.com/css2?family=Amatic+SC&display=swap');



body {

--logo-alphabet: 'Amatic SC';

}

以下の項目をチェックする

❌かならずbodyで囲う

--logo-alphabet: 'Amatic SC';

❌半角引用符'で囲う（ダブル引用符でも問題ありませんが、かならず半角にしてください）

body {

--logo-alphabet: Amatic SC;

}

❌'Amatic+SC'（＋を挟まない）

body {

--logo-alphabet: 'Amatic+SC';

}

❌'amatic sc'（大文字小文字を確認）

body {

--logo-alphabet: 'amatic sc';

}

❌cursiveなど、他の記述は削除

body {

--logo-alphabet: 'Amatic SC', cursive;

}

↓
⭕️正しい記述

body {

--logo-alphabet: 'Amatic SC';

}

8. マイテーマCSS

念のため手順を全部振り返ります

ラテ式CSSベースver 1.6以降を［サイト全体設定］> ［共通HEAD］にコピペ
マイテーマを作る
（参考→マイテーマの作り方）
［マイテーマ編集］>［CSSを編集］を開く

※「ラテ式CSS拡張版」を利用している場合は、拡張版も最新CSSに入れ替える必要があります

@import url('https://fonts.googleapis.com/css2?family=Amatic+SC&display=swap');



body {

--logo-alphabet: 'Amatic SC';

}

↑上のテキストを［マイテーマ編集］>［CSSを編集］フォーム内の一番上の行にペースト

9. デザインテーマ着せ替え

デザインを着せ替えるには？を参照して、今回作成したマイテーマを適用する

完成
（→画像⑦【Google Fontsの使い方】）

10. サイズ調整

（ここからはもっとデザインしたい人向け）
（説明が複雑になってくるので、ここで終わりでもいいと思います）

では、微調整していきます。
ラテ式CSSでは、フォントサイズ用の変数も用意しています（font-size）

--size-h1：フォントサイズ/マイページのサイト名（＝トップページのサイト名）規定値2rem
--size-header：フォントサイズ/見出し（<h2><h3>）規定値1.33rem

マイページのサイト名が小さい気がするので数値を大きくします。

body {

--size-h1: 3rem;

}

--size-h1の規定値は2rem。おすすめは2rem 〜 2.5remのあいだです。単位は「rem」が推奨です。
今回のフォント「Amatic SC」は相当かなりとても小さいので3remにします。

11. 字間調整

サイズは調整できました。
（→画像⑧【Google Fontsの使い方】）
ですが、なんとなく窮屈に見えます。もうすこし調整します。

ラテ式CSSでは、字間の変数も用意しています（letter-spacing）

--ls-h1：字間/マイページのサイト名（＝トップページのサイト名）規定値0.1em
--ls-header：字間/見出し（<h2><h3>）規定値inherit

--ls-h1の規定値は0.1em。
今回のフォント「Amatic SC」は0.15emにします。見出し<h2><h3>の字間も同じ値にします。

body {

--ls-h1: 0.15em;

--ls-header: 0.15em;

}

筆記体の場合

筆記体はnormalにしてください

body {

--ls-h1: normal;

--ls-header: normal;

}

12. 最終確認

@import url('https://fonts.googleapis.com/css2?family=Amatic+SC&display=swap');



body {

--logo-alphabet: 'Amatic SC';

--size-h1: 3rem;

--ls-h1: 0.15em;

--ls-header: 0.15em;

}

このCSSで↓画像⑨のようになるはずでず。
（→画像⑨【Google Fontsの使い方】）

おわり

変数まとめ

これまでに紹介した変数をまとめます

--logo-alphabet：欧文フォント/サイト名や見出し
--logo-kanji：和文フォント/サイト名や見出し
--sub-alphabet：欧文フォント/本文・ナビゲーションリンク・フッターリンク
--size-h1：フォントサイズ/マイページのサイト名（＝トップページのサイト名）規定値2rem
--size-header：フォントサイズ/見出し（<h2><h3>）規定値1.33rem
--ls-h1：字間/マイページのサイト名（＝トップページのサイト名）規定値0.1em
--ls-header：字間/見出し（<h2><h3>）規定値inherit

補足

他にもフォント関連のCSS変数は用意していますが、中級者向けの説明ではなくなってしまうため、全部はここで説明しません。
知りたい方はラテ式CSSベースの中身を読んでください。

最後に、おすすめ参考URLを置いておきます。CSS変数を知りたい方向け。
→ CSS カスタムプロパティ (変数) の使用 - CSS: カスケーディングスタイルシート | MDN

Home