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 でプランが分かれるため、公開前に自分のサイトの規模とプランを合わせる。
注意
- Google Fonts の書体はダウンロードして自分のサーバーから配信することもできる。ライセンスは書体ごとに確認
- font-display の指定で、読み込み中にシステム書体を先に出すと表示の待ちが減る