Web フォントを入れる

Google Fonts と Adobe Fonts に共通する「書体を選ぶ→読み込みコードを得る→CSS で指定→表示を確かめる」の流れ。

1. 書体と太さを選ぶ本文用と見出し用で最大でも数書体に絞る。日本語は文字数が多くファイルが大きいため、使う太さ（Regular と Bold など）を最小限にする。Google Fonts なら Noto Sans JP、Adobe Fonts なら源ノ角ゴシックのような日本語書体から。
2. 読み込みコードを取得するGoogle Fonts は書体を選ぶと link タグと CSS の指定が表示される。Adobe Fonts は Web プロジェクトを作って書体を追加すると、埋め込み用のコードが発行される。どちらもサイトの head に貼る。
3. CSS で font-family を指定する本文と見出しに、取得した書体名を font-family で指定する。読み込めなかったときのために、後ろにシステムの書体（sans-serif など）を並べておく。
4. 表示を確かめるスマートフォンと PC の両方で、日本語の文字が意図した書体で出ているかを見る。太さが指定していないものになっていれば、読み込む太さが足りていない。
5. ドメインと PV の条件を見るAdobe Fonts は Web プロジェクトごとに使えるドメインを登録する。国内の Web フォントサービス（TypeSquare・FONTPLUS）は月間 PV でプランが分かれるため、公開前に自分のサイトの規模とプランを合わせる。

コツ