Web フォントは基本的に使用しない。Web フォントの在り方は？

ユーザーにフォント選択の自由がない

とくに文字がメインのウェブサイトなのであれば、フォントを選択する権利はユーザーにあるべきであると考えます。

つまり、理想はこれです。

:root { font-family: sans-serif; }

この font-family の指定であれば、ブラウザに設定されたデフォルトのフォントが使用されます。これはユーザーが自由に変更することができるため、

• 読字障害を持っているため、読みやすいフォント (ユニバーサルデザインフォント) を使用したい
• ゴシック体ではなく、明朝体を使用したい
• 単純に、好きなフォントを使用したい

といったユーザーのニーズを満たすことができます。

同様に、緻密なレイアウトを要求される場所以外は、文字のサイズもブラウザのデフォルト (100%) を使用するべきでしょう。

リターンにコストが見合わない

日本語と Web フォントの相性は悪く、1 ウェイトだけでもメガ単位の容量が必要になってしまいます。本文のフォントとして使用するのであれば、最低でも 2 ウェイトは必要になります。

複数の書体を使いたければ、より速度は低下し、穂刈ソースの読み込み時間も加われば、明らかな読み込み速度低下に繋がります。

すべての文字に対して Web フォントを使うならバリアブルフォントを

バリアブルフォントは、ウェイトが可変する機能を持った OpenType フォントで、従来の 1 ウェイトとほぼ同じファイルサイズで複数の太さ (上限下限はフォントによって異なります) を実現することができます。

例えば、Google Fonts で使用できるフォントであれば、Noto Sans Japanese ⧉ や Noto Serif Japanese ⧉ はバリアブルフォントが用意されています。

<!-- 旧: 400 と 700 のウェイトを読み込む -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700&display=swap" rel="stylesheet">
<!-- 新: 200 から 900 までのバリアブルフォントを読み込む -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap" rel="stylesheet">

ウェイトを複数指定してこれらの Web フォントを使用している場合は、バリアブルフォントの指定に変更することで、今までよりも読み込むファイルサイズを抑えながら、様々なウェイトを使用することができるようになります。例えば、Noto Sans Japanese フォントファミリー 9 書体のファイルサイズは 49.1 MB ですが、バリアブルフォントは 9.1 MB です (もちろん文字はサブセット化されているため実際の通信量はもっと少なめです)。

使用しろと言われたとき

クライアントワークで Web フォントの使用を要望されたら、デメリットを説明してそれでも希望される場合は導入しましょう。

太いフォント・デザイン性の高いフォントを使いたいとき

ページタイトルの見出しなどでは、太いウェイトのあるフォントやデザイン性の高いフォントを使用したい時があるかと思います。その場合は Web フォントの使用を行っても良いでしょう。

Google Fonts では、link 要素で Web フォントを読み込む際に text パラメーターに使用する文字を指定することで、読み込むグリフの容量を削減することができます。

<!-- 「ペ」「ー」「ジ」「タ」「イ」「ト」「ル」のグリフのみ読み込む -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@900&display=swap&text=ページタイトル" rel="stylesheet">

この書き方だと、「ページタイトル」という文字を Noto Sans JP Black で表示することができるようになります。同じ文字が複数含まれている場合は、1 文字のみでも OK です (「Hello, world」は「Helo, wrd」)。

ブランディングとして

フォントをウェブサイトのブランディングに活用したい、というような場合は積極的に Web フォントを使用しても良いでしょう。例えば、このようなサイトの場合です。

• ハンドメイド雑貨を取り扱う EC サイトで、手書き風フォントを使用する
• 中古車販売サイトで、車の走行距離を示す数値を 7 セグ風フォントで表示する (オドメーターを再現)
• 自分の小説を載せたサイトで、明朝体を使いたい (なんとしてでも！)

どんな場合であっても Web フォントを使ってはいけないという訳ではなく、Web デザインとしての独創性と、ユーザー体験のバランスが重要であるということです。