Google Fontsの使い方
「自分でWebフォントをサイトに入れてみたい」そんな人向けの説明書です。
【2023/04/28追記】手順5「@import整形」の記述を修正しました
今回はこれを使います↓
https://fonts.google.com/specimen/Amatic+SC
(→画像①【Google Fontsの使い方】)
「Regular 400」の[
右サイドバーが開きます
(→画像②【Google Fontsの使い方】)
「Use on the web」の[
コピペする要素は2ヶ所あります
(→画像③【Google Fontsの使い方】)
画像③のAとB
何らかのメモ帳を開いて準備してください
アイコンをタップ
(→画像④【Google Fontsの使い方】)
※テキストを手動で選択してコピーすると、正しくコピーできません(iOSの場合アルファベット大文字が小文字になる)
用意したメモ帳にペースト
今回は
何らかの理由によって、手順4で手動で選択コピーペーストした場合、以下の項目をチェックしてください
❌
⭕️
⭕️フォレストページ+の場合は複数フォントを一行にまとめて記述できません(最初のフォントだけ読み込まれる)
【2023/04/28追記】マイテーマCSS内のみ複数指定が有効です。共通HEADとマイテーマHEADでは複数指定が無効です。
⭕️フォント1つにつき一行【2023/04/28追記】マイテーマCSS内ならば複数フォントを一行にまとめられます。
アイコンをタップ
(→画像⑤【Google Fontsの使い方】)
※今回は手動で選択コピーしても問題ありませんが、一応手順4と合わせます。
用意したメモ帳にペースト
かならず
このままでは動作しないので整形します
ラテ式CSSでは、以下の変数でフォントを指定します。
(→画像⑥【Google Fontsの使い方】)
今回はサイト名や見出しにAmatic SCを適用します。
変数
以下の項目をチェックする
❌かならず
⭕️正しい記述
念のため手順を全部振り返ります
※「ラテ式CSS拡張版」を利用している場合は、拡張版も最新CSSに入れ替える必要があります
↑上のテキストを[マイテーマ編集]>[CSSを編集]フォーム内の一番上の行にペースト
デザインを着せ替えるには?を参照して、今回作成したマイテーマを適用する
完成
(→画像⑦【Google Fontsの使い方】)
(ここからはもっとデザインしたい人向け)
(説明が複雑になってくるので、ここで終わりでもいいと思います)
では、微調整していきます。
ラテ式CSSでは、フォントサイズ用の変数も用意しています(
マイページのサイト名が小さい気がするので数値を大きくします。
今回のフォント「Amatic SC」は相当かなりとても小さいので
サイズは調整できました。
(→画像⑧【Google Fontsの使い方】)
ですが、なんとなく窮屈に見えます。もうすこし調整します。
ラテ式CSSでは、字間の変数も用意しています(
今回のフォント「Amatic SC」は
筆記体は
このCSSで↓画像⑨のようになるはずでず。
(→画像⑨【Google Fontsの使い方】)
おわり
これまでに紹介した変数をまとめます
他にもフォント関連のCSS変数は用意していますが、中級者向けの説明ではなくなってしまうため、全部はここで説明しません。
知りたい方はラテ式CSSベースの中身を読んでください。
最後に、おすすめ参考URLを置いておきます。CSS変数を知りたい方向け。
→ CSS カスタムプロパティ (変数) の使用 - CSS: カスケーディングスタイルシート | MDN
【2023/04/28追記】手順5「@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. 使うテキストを確認
コピペする要素は2ヶ所あります
(→画像③【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');↓
⭕️
@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拡張版」を利用している場合は、拡張版も最新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