Release.2023.3Webフォント、使ってますか？

以前より商用利用できる欧文系Webフォントは豊富にありましたが、一昔前に比べ日本語Webフォントの数も徐々に充実してきました。
タイトル周りはもちろんコンテンツ本文など、普段使っているデバイス／Webブラウザ依存のフォントから個性的なWebフォントに置き換えるだけでサイトの印象がパッと変わるので、ちょっとしたサイトデザインのマイナーチェンジなどにもオススメです。

またWebフォントはサイトコンテンツ内に掲載している画像データなどと同様、フォントデータを格納しているサーバから書体情報を読み込むため、AndroidやiOS搭載のスマートフォンやiPhone、タブレット端末、PC（Windows／Mac…）など、どのデバイスでも共通のフォントを表示させることができるというメリットもあります。

ここまで一見いいことずくめに思えるWebフォントですが、いいものにはもちろん少なからずデメリットもわずかに存在します。現状。
では、個人的にも利用することの多い無料で使えるWebフォントのご紹介をメインに、デメリットとWebフォントご利用の際の対策もカンタンにご紹介していきます。

Webフォントの種類

Googleフォント

無料で利用できるWebフォントの代表格として、Googleフォントがあります。
和文フォントも徐々に増え、派生書体を含め数十書体〜（2023年3月現在）を利用できるようになりました。

使用頻度の高いノーマルなゴシック／明朝系書体をはじめ、丸ゴシック／ポップ系フォント（M PLUS Rounded 1c ／ RocknRoll One）、オシャレ系（Kaisei Decol）、さらにライン系（Train One）なども提供しており、「迷ったらGoogleフォント？」というようなラインナップになりつつあります。

以降は有料となりますが、有名どころを軽くご紹介します。

Adobe Fonts

言わずと知れたクリエイター界隈では必須ともいえる各種ツールを提供しているアドビシステムズが配信しているフォントサービスです。

TypeSquare

これまたDTP業界の古参、モリサワが提供するWebフォントサービスです。

FONTPLUS

フォントメーカー企業の2大巨頭？モリサワ ／ フォントワークスをはじめ、イワタやモトヤ、筆文字書体が印象的な白舟書体など、大手が提供するフォントを多数利用できるサービス。予算次第でどんどん活用していきたいWebフォントサービスです。

Webフォント利用のデメリットと対策法

このように手軽にサイトデザインをより印象的なものへカスタマイズできる魅力的なWebフォントですが、利用にあたり少なからずデメリットも存在します。（特に和文書体の場合）
大まかなデメリットを3つほどあげてみて、プラマイゼロになればいいな〜…的な対策法も同時にご紹介してみます。

現時点のデメリット（今後改善するかも）

だいぶ増えてきたものの、利用できるフォントの種類がまだまだ少ない

一昔前に比べさまざまなデザインフォントが利用できるようになってきましたが、日本語フォント（ひらがな／カタカナ／漢字と記号…など）は欧文書体（「A〜Z」と記号…など）に比べ収録文字数が非常に多く、選択したフォントによっては使いたい文字（旧字体の漢字など）が対応していないケースもあります。

フォントデータ自体が重く、ブラウザの読み込み速度も遅くなりがち

上記のような収録文字数の関係上、日本語フォントは欧文フォントに比べファイルサイズが大きくなりがち…、なのでWEBサイトが表示されるまでの時間がブラウザ毎のデフォルトフォントを使用した場合に比べ、やや鈍重になりがちです。

Google Fonts APIなど外部APIサービスなどを利用した場合の遅延

Webフォントを利用する際、もっとも手軽で手っ取り早い方法がHTMLコードなどに1〜数行追加するだけで利用可能な、外部APIサービスの活用になるかと思います。

この場合、インターネット上に存在するフォント提供元のディベロッパーサーバなどからフォントデータを読み込まなければならないため、接続しているサーバ・ネット回線などの状況によってはWEBサイトが表示されるまで時間がかかってしまう場合があります。特に日本語対応のフォントデータは容量が大きくなるので、ネットワークインフラも考慮し、「5G」や「10ギガ」などが標榜される現在でも、むやみに多用しない方がベターではないかと考察されます。
なにわともあれ、シンプルにブラウザ上で使用したフォントデザインが正常に表示され、かつ動作が軽いほうがベターかと。

対策法

サーバ内部化（Embed）

利用したいWebフォントをWEBサイトを格納するサーバ内へ同梱することで大きな改善が期待できます。
単純にサイト情報（コンテンツ内容）とフォント情報をそれぞれ個別のサーバから読み込まなくてよくなり、サイトデザインデータ全てを配信する大元のサーバに一元化されるため、ブラウザレスポンスの向上が期待できます。

サブセット化

フォントの“サブセット化”とは、コンテンツ内などで使用した文字（字形）のフォント情報（データ）のみをピンポイントで抜き出し、出力するテクニックになります。そのため、一般のフォントデータ（使用していない文字情報を含むベースデータ）よりもファイルサイズが小さくなるため、収録文字数が多い日本語フォント特有の問題である、ブラウザ表示の延滞を軽減する効果が期待できます。

一般的なJIS第一水準のフォント字形情報をベースとして、旧字体などを使用しているサイトの場合は必要に応じて第二水準のフォントデータをサブセット化、サーバ内に内包することで、ブラウザ表示スピードを可能な限り担保することができます。

バリアブルフォントを使用する
（同一スタティックフォント銘柄内包のフォントスタイルを複数使用する場合より軽量）

使用したいなと思った1種類のフォントがあった場合、「この書体情報を活用してタイトルや引用文などにも流用したいな〜…」、つまり、サイト記事内のテキストスタイルで同時に自由に再利用したいと思わせるフォントは多くの場合、異なる太さや派生デザインフォント情報（Bold / italic など）を含むフォントであることがよくみうけられます。
それらを全て使用する場合、例えばベースとなる「○○○○○」フォントの他に、「○○○○○-bold（Weight：太さ）」「○○○○○-italic（Slant：傾斜）」の他、「○○○○○-condensed（Width：文字幅）」など同じ書体なのに複数のフォントデータをWEBサイトに読み込む必要があります。

これら「フォントベーススタイル + 派生スタイル」フォント情報を1つのフォントデータに集約保持し、WEBブラウザ上に再現できるのが「バリアブルフォント」。
日本語フォントにおいてはまだまだ少数派ですが、通常のベースフォントの他、「〜bold」「〜italic」なども読み込まなくてはならない既存のスタティックフォントに比べ、ブラウザ読み込みデータ総容量を減少させることが期待できるため、個人的にも注目しているフォントカテゴリーです。

Google日本語フォントでは、これまで「Noto」「M PLUS」系フォントなどのバリアブル化が進んでいる模様です。

以上、WEB界隈における「WEBフォントの活用」について、日々進化が少し気になっている、いちクリエイターのつぶやきでした。
Webフォント利用を通じて、「より便利で、もっと使いやすくて楽しい」サイトデザインをさらにシンプルかつ手軽に表現できるようになると、より良いですね。