当サイトはプロモーションを含みます。リンク経由の申し込みで紹介料を受け取ることがあります。掲載順は対価で動きません。
素材・フォント、いま選ぶなら商用の条件と使う量で、迷わず決める

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 でプランが分かれるため、公開前に自分のサイトの規模とプランを合わせる。

注意

  • Google Fonts の書体はダウンロードして自分のサーバーから配信することもできる。ライセンスは書体ごとに確認
  • font-display の指定で、読み込み中にシステム書体を先に出すと表示の待ちが減る

この手順で使うツール

フォントの料金を比べる →