Webフォント
Webフォントの仕組みと使い方
Webサイト上で CSS を使って、自由にフォントを表示するための技術です。閲覧している人のパソコンやスマホにそのフォントが入っていなくても、同じ書体で表示できます。
サンプルコード
実行結果
解説
Webフォントとは、Webサイト上で CSS を使って自由にフォントを表示するための技術 です。フォントのデータをサーバーから読み込むので、閲覧している人の環境（端末に入っているフォント）に依存しません。
見出しなどを画像にしなくても、デザイン通りの書体を 文字のまま 表示できます。文字なので検索エンジンにも内容が伝わり、SEO 的に有利 になるメリットがあります。
Webフォントには 有料Webフォントと無料Webフォント があります。クライアントの予算に合わせて提案します。
使い方は、link タグでフォントを読み込み、font-family でそのフォント名を指定するだけです。上の例では Google Fonts から Noto Sans JP を読み込んでいます。
応用例・注意点
Google Fonts の実装方法
| 手順 | 説明 |
|---|---|
1. フォント名を検索 | Google Fonts（fonts.google.com）でフォント名を検索し、使いたいフォント（例：Noto Sans Japanese）をクリックする |
2. Get font | フォントのページ右上の「Get font」をクリックする |
3. Get embed code | フォントを選ぶと「1 font family selected」の画面になるので、右側の「Get embed code」をクリックする |
4. link と font-family を貼る | 「Web」タブで link タグをコピーして HTML の head に貼り、font-family の1行をコピーして CSS ファイルに貼る |
Google Fonts の link を head に貼る
手順4で「Embed code in the <head> of your html」の欄からコピーしたコードです。preconnect の2行は読み込みを速くするためのものなので、そのまま一緒に貼ります。
読み込んだフォントを使う
読み込んだあとは、普通のフォントと同じように font-family に名前を書きます。最後に総称ファミリーも書いておきます。
太さを範囲で読み込む（Full axis）
Full axis のままコピーすると、太さが wght@100..900 のような範囲で書かれます。.. は「100から900まで全部」という意味です。使う太さが決まっているなら、One value を選ぶか wght@400;700 のように ; 区切りで必要な太さだけにすると軽くなります。
@import で CSS ファイルから読み込む
Embed code の画面で <link> ではなく @import を選ぶと、CSS ファイルの先頭に書くコードが表示されます。HTML を触れないときに使えますが、link より読み込みが遅くなりやすいので、基本は講義どおり link を使います。
注意点
- 01日本語に対応した Webフォントは、英語のフォントに比べるとまだ少ないです。
- 02日本語のフォントは文字数が多くファイルが大きいため、表示速度が遅くなる ことがあります。使う太さ（wght）を必要なものだけに絞って読み込みます。
- 03サービスによっては、PV数・ドメイン数・使える書体数など 利用上の制限 があります。案件で使う前に利用規約を確認します。
- 042行目の preconnect に付いている
crossoriginは消さずにそのまま貼ります。フォントのファイルを別のサーバー（fonts.gstatic.com）から取ってくるために必要な属性です。 - 05
@importは CSS ファイルの一番上（ほかのルールより前）に書かないと効きません。 - 06Webフォントが読み込めなかったときのために、font-family の最後には sans-serif などの総称ファミリーを書いておきます。
Embed code 画面の見方・メリットとデメリット・サービス一覧
Embed code 画面の見方
「Get embed code」をクリックすると Embed code の画面になります。たくさん表示されますが、Webサイトで使うのは次の部分だけです。
| 画面の表示 | どうするか |
|---|---|
| Web / Android / iOS / Flutter のタブ | Web を選ぶ（ほかはアプリ用） |
<link> / @import の選択 | <link> を選んだままにする（@import は CSS に書く別の方法） |
| Embed code in the <head> of your html | この欄の link タグ（3行）を Copy code でコピーし、HTML の head に貼る |
| Weight：Full axis / One value | Full axis は 100〜900 の太さを全部、One value は1つの太さだけ読み込む。日本語フォントは重いので、使う太さが決まっていれば絞る |
| CSS class for a variable style | 見本のうち font-family: "Noto Sans JP", sans-serif; の1行だけを CSS ファイルに貼る。<uniquifier> や <weight> は自分で置き換える前提の見本なので、そのまま貼らない |
太さの書き方（URL の wght）
wght@100..900：..は範囲。100から900までのすべての太さ（可変フォント）wght@400;700：;は区切り。400と700の2つの太さだけ
メリットとデメリット
| 内容 | |
|---|---|
| メリット | 閲覧しているユーザーの 環境に依存しない（端末にフォントが入っていなくても同じ書体で表示できる） |
| メリット | 画像ではなく 文字で記述できる ため、SEO 的に有利 |
| デメリット | 日本語対応の Webフォントがまだ少ない |
| デメリット | 表示速度が遅くなる 場合がある |
| デメリット | 利用上の制限 がかかることがある（PV数・ドメイン数など） |
Webフォントサービス一覧
| サービス名 | 提供会社 | 利用料 | フォントの種類 |
|---|---|---|---|
| Google Fonts | 無料 | 1,700種類以上 | |
| Adobe Fonts | Adobe | Creative Cloud 製品ユーザーは 0円。※案件で使う場合は、クライアントごとに契約が必要（有料） | 500を超える日本語フォントを含む 20,000以上 |
| TypeSquare | モリサワ | 月契約 0円（PV数 1千PV／月・利用可能書体数 1・利用可能ドメイン数 1）。※いくつかプランあり | 2,000種類以上 |
| FONTPLUS | SBテクノロジー株式会社 | 月額 1,100円〜。PV に応じて変動。半年無料のトライアルあり | 600種類以上 |
| DynaFont | ダイナコムウェア株式会社 | 11,000円／100万PV | 1,300種類以上 |
| FontStream | 株式会社コム・クエスト | 1サイトあたり 550円／30日。PV数・フォント使用数の制限はなし。初回30日間無料 | 80種類以上 |
料金について
- 料金やフォントの数は講義時点の情報です。最新の内容は各サービスの公式サイトで確認してください。
- 無料で始めるなら Google Fonts が定番です。日本語なら Noto Sans JP（ゴシック）や Noto Serif JP（明朝）がよく使われます。