Webフォント

目次

本記事では端末に搭載している書体の確認方法は wordmark.it を利用しています。

Webで表示されるフォントの難点

1. 使用機種・端末に依存する

游ゴシックメインのWebサイトを作成した場合、
游ゴシックはWindows, Macに標準搭載されていますが、iPhone, Androidといったスマホには搭載されていないため、代替書体を指定しないといけません。

body {
  font-family: 游ゴシック体, 游ゴシック, YuGothic, '代替書体', sans-serif;
}

どうしても表示させたい場合、游ゴシックのWebフォントを提供しているサービスを利用する方法もありますが、こういった書体は有料のWebフォントサービスを利用することになります。
Webで游ゴシックをiPhoneやAndroidで表示できない？表示するには？ - Qiita

ヒラギノ角ゴを指定した場合、Mac, iPhoneに標準搭載されていますが、Windows, Androidには搭載されていません。

body {
  font-family: 游ゴシック体, 游ゴシック, YuGothic, 'Hiragino Kaku Gothic ProN', HiraginoSans-W3, sans-serif;
}

※ 『Hiragino Kaku Gothic ProN』 は macOS（Big Sur）用、『HiraginoSans-W3』はiOS用の記述

よほどデザインにこだわりがなければ、 sans-serif で端末に標準搭載されているゴシック体に判断を委ねるほうが良いかと思われます。

参考記事

• 2020年に最適なfont-familyの書き方 - ICS MEDIA

2. 日本語のWebフォントサイズが大きすぎる

Webフォントを利用する場合、以下の表からも分かる通り和文フォントは字数・容量が欧文フォントの25倍ほどあります。

また後述の Webフォントサービス > Google Fonts で表示している書体サイズは以下の通りになります。

通常のWebサイトの表示サイズ（容量）は 2 MB ぐらいまでが望ましいので、Webフォントを読み込んだ時点で Google PageSpeet Insights で減点されますし、ユーザーに対しても不親切です。

和文書体のフォントデータ容量を下げる方法はあるのですが、それぞれにデメリットが存在します。

a. フォントデータのサブセット化

必要な文字以外を削除して軽量化したフォントファイルを生成する『サブセット化』という方法です。
デメリットとしては、自分以外がサイトを運用する際に再度サブセット化を行う必要が出てきた場合に、処理を行わせる負担が非常に大きいことです。
それでも行ってみたい方は以下の記事が参考になるかと思われます。

• サブセット化で日本語Webフォントの容量を軽量化する方法｜株式会社TORAT｜東京都中央区のweb制作会社
• Nuxt.jsでページ内の日本語だけでWebフォントのサブセットを作成したい（静的サイトの話） - Qiita

Google Fontsではtextパラメーターを付与することでサブセット化を行うことができます。
Google Fontsのファイルサイズを簡単に軽量化できる！日本語フォントにも対応 | コリス

b. ダイナミックサブセット

『Adobe Fonts』『FONTPLUS』といったWebフォントサービスでは『ダイナミックサブセット』という使用する文字のみ動的に選択しダウンロードさせる技術を取り入れています。
この技術なら a. フォントデータのサブセット化 のデメリットを解決できますが、以下のようなデメリットがあります。

• ページ遷移時にサブセットの再取得を行ってしまう（サブセットのキャッシュを保持してくれない）
• font-familyで指定されているテキストをDOMから取得
  → フォントサブセットに追加する文字をサーバーにリクエストする処理が発生する

• ↑上記の処理により、書体の再描画までの間にデフォルト書体がブラウザ側で非表示にされてしまう
  ※ こちらはfont-display: swap;で非表示にされたデフォルト書体を表示させる対処方法があります。

  • font-display - CSS: カスケーディングスタイルシート | MDN
    
  • [CSS]Web制作者が知っておきたい、Webフォントを快適に表示するCSSの新しいプロパティ「font-display」 | コリス

参考記事

• ダイナミックサブセットと Web フォント提供 - Adobe Fonts User Guide
• NuxtでAdobe Fontsを利用する（日本語対応） | eureka
• 2020年に最適なfont-familyの書き方 - ICS MEDIA

余談ですが、Google Fonts は @font-face ごとに unicode-range を書いているので、ダイナミックサブセットの処理は行われていません。

• Time to Say Goodbye to Google Fonts
• Google Fontsを使う限りPage Speedは上がらない | tm23forest.com

Webフォントサービス

2021年1月時点でのWebフォントサービスについてまとめています。

Google Fonts

Googleが提供しているWebフォントサービスです。

フォントデータのダウンロードや、Google Fonts APIでフォントを簡単にサイトへ埋め込むことができます。
Google Fonts APIの方法については 公式ガイドページ を参照ください。

ライセンス：オープンソース（商用・非商用を問わず、誰でも利用することができ、自由に修正、頒布ができる）

日本語書体は以下の通り（※2021年10月27日時点）
余談ですが本ページではサンプル文字だけ取得する方法（textパラメーター）を取り入れています。
例）&text=彼らの機器や装置はすべて生命体だ。あいうえおアイウエオかきくけこカキクケコサシスセソ

ZEN丸ゴシック

制作：大平善道

Adobe Fonts

Adobeが提供しているWebフォントサービスです。以前は「Typekit」という名称でした。
AdobeアカウントとCreative Cloudの利用が必須になります。（詳細はこちらを参照）

利用したいフォントをアクティベートすることでパソコン上で利用することができます。
Webフォントとして利用したい場合は、該当する書体の詳細ページから </> Web プロジェクトに追加 で利用することができます。
具体的な使い方に関しては Adobe Fonts ユーザーガイド をご参照ください。

ライセンス：Adobe Fonts User Guide - フォントのライセンスをご参照ください。

日本語書体はAdobe Blogで公開されているPDFで確認できます。

Adobe Fontsが大幅拡充！日本語フォントラインナップが強化されました

Adobe Fontsのラインナップが大幅に拡充され、日本語のラインナップが強化されました。
https://blog.adobe.com/jp/publish/2021/04/08/cc-design-adobefonts-font-day-2021.html

TypeSquare

モリサワが提供しているWebフォントサービスです。
基本的に有料プランでも利用になります。詳しくは 価格 | Webフォント TypeSquare をご参照ください。

以下に該当する場合も利用出来ます。
※ PV数・書体数・ドメイン数に制限がある場合があるので注意。
※ 下記以外のレンタルサーバーでも利用できる場合があります。試しに調べてみてくださいませ。

FONTPLUS

SBテクノロジー株式会社が提供しているWebフォント配信サービスです。

DynaFont Online

『DynaFont』で有名なダイナコムウェア株式会社が提供しているWebフォントサービスです。

fonts.com

Monotypeが提供しているフォントサービスです。モノタイプ社なこともあり、欧文書体の数は最大規模かと。

参考記事

• Webフォントサービスの徹底比較！ 和文フォントが使える5つのサービスの利点まとめ - ICS MEDIA
• 国内のWebフォントサービスまとめ【2018年10月版】 - フォントブログ
• 海外のWebフォントサービスまとめ【2015年11月版】 - フォントブログ

バリアブルフォント（Variable Font）

バリアブルフォントは幅、太さ、スタイルごとに個別のフォントファイルを用意するのではなく、書体のさまざまなバリエーションを 1 つのファイルに組み込むことができる OpenType フォント仕様の進化版です。
CSS および単一の @font-face 参照を介して、特定のフォントファイルに含まれるすべてのバリエーションにアクセスできます。

バリアブルフォントガイド - CSS: カスケーディングスタイルシート | MDN

MDN で実例が確認できます。

2021年1月時点では和文書体で対応している書体はありません。

参考記事

• バリアブルフォントガイド - CSS: カスケーディングスタイルシート | MDN
• 次世代のフォント技術　バリアブルフォントの世界 - ICS MEDIA