WEBフォントについて解説とおすすめのフォント紹介

WEBサイトのフォントについて意識したことはありますか？明朝体フォントやおしゃれなフォントでWEBサイトを高貴なイメージにしたり、ゴシックフォントで文章を読みやすくしたりなど、フォントはWEBサイトのイメージを決める重要な要素です。

今回はそんなWEBサイトの印象を左右させるフォントについて解説します。

フォントとは

WEBサイトの文字はフォントファイルを読み込み適用することで表示されます。

パソコンやスマホにあらかじめインストールされている“実機フォント”があります。実機フォントは、WindowsとMacで使用されているフォントの種類が異なることがあるため、ユーザーの使っているパソコンまたはスマホなどの端末によってWEBサイトの見た目が変わってしまうというデメリットがあります。

これを解決するために、WEBサイトの運営サーバー内にあらかじめフォントをアップロードし、全てのユーザーがそのフォントを読み込むことで同じフォントを表示する“WEBフォント”という技術が提供されました。

フォントは有料のものだけでなく、無料でも配布されています。この中からWEBサイト運営のイメージに合うフォントをサーバーにアップロードすることでフォントを利用することができます。

WEBサイトでは、タイトル部分やファーストビューの部分だけ特別にフォントを変更したい場合も多い一方で、フォントファイル容量が懸念点になってしまいます。特に日本語や中国語は文字の種類が膨大であるためフォントのファイル容量がかなり大きくなってしまいます。

ファイル容量が大きくなることにより、WEBサイトの表示が遅くなってしまう上、ユーザーの通信量も増加します。

それを解決するのがWEBフォントサービスです。

WEBフォントサービス

WEBフォントサービスは、CSSやJavaScriptをWEBサイトに記述するだけで、フォントのファイルをサーバーにアップロードしなくてもWEBフォントを利用することができるためのサービスです。

さらに、WEBフォントサービスでは、使用する文字のみをフォントを読みこむ“ダイナミック・サブセット”という技術を利用することができます。フォントの読み込みを特定の文字のみに限定することで、フォントファイルの容量を抑えることができユーザーの通信量も抑えることができます。

WEBフォントサービスも、有料・無料さまざまな提供されており、公開されているフォント数なども異なるため、使いたいフォントに応じてサービスを選定する必要があるでしょう。

このWEBフォントサービスのことを“WEBフォント”と呼び、サーバーにアップロードされたフォントを“セルフホスティングフォント”と呼び分けることもあります。

WEBフォントサービスのデメリット

このように必要なフォントだけを読み込むことができ便利なWEBフォントサービスですが、注意点もあります。

WEBフォントサービスによって利用者を限定するライセンスで提供されている場合があります。ライセンスはフォント毎に異なる可能性もあるため、適宜確認する必要があります。

他にもWEBフォントサービスの利用によって、フォントの読み込みに遅延が発生する可能性があります。WEBフォントサービスにアクセスするためには、JavaScriptかCSSの読み込みが必要です。ダイナミック・サブセットを利用せずに、WEBフォントサービスのフォントを読み込む場合、通常のサーバーにアップロードされたフォントに比べ、読み込み時間がさらに増加する可能性があります。

読み込みに遅延が発生すると、フォントの読み込み前に表示されていたフォントからWEBフォントに変化する際に画面のチラつきが発生する可能性があります。

主要WEBフォントサービス

WEBフォントサービスは多くの企業・団体から提供されています。今回はその中でも、特によく使われているサービスを2つ紹介します。

Google Fonts

Googleが2010年から提供しているWEBフォントサービスで、誰でも無料で利用することができます。1500種類以上のフォントが登録されており、そのうち64種類が日本語フォントで、ひらがな・カタカナ・漢字が揃っているフォントは52種類です。日本語のブログ記事用としてフォント使用する場合は、この52種類の中から選ぶ必要があります。

Google Fontsを見る

Adobe Fonts

PhotoshopやIllustratorなどを提供しているAdobeのWEBフォントサービス。無料で利用することができますが、無料枠では利用できるフォントの数に制限があります。Adobeのサブスクプランに加入することで、制限なく利用できるようになります。無料版では、約120種類。制限なしでは約420種類の日本語フォントが利用できます。

対応している漢字の数が少ないフォントもあるため注意が必要です。

Adobe Fontsを見る

おすすめのWEBフォント

2つのWEBフォントサービスで利用することができるおすすめフォントをいくつか紹介します。

Notoファミリー

GoogleとAdobeが共同開発した、どのようなデザインにも馴染みやすい定番中の定番フォントです。世界中の言語に対応しておりNotoファミリー全体で200種類も存在します。WEBフォントで日本語を利用する場合は、Noto Sans Japanese・Noto Serif Japaneseの2種類おすすめです。Noto Sans CJKやNoto Serif CJKというフォントにも日本語が含まれていますが、CJK「Chinese, Japanese, Korean」と3つの言語に対応しているフォントであるため、ファイルの容量大きいので注意しましょう。

フォントの太さの種類が、Noto Sans JPは9種類、Noto Serif JPは7種類あ離ます。WEBサイトのフォントで迷ったらこれを利用して良いと言えるくらい非の打ち所がないフォントです。

ZATYのBLOGの文章でもNoto Sans Japaneseを利用しています。

Zenファミリー

大平善道さんが代表を務めている有限会社エイワンが提供されたフォントです。同社は2021年に和文23書体と欧文4書体をGoogle Fontsに提供しフォントライセンス事業から撤退しました。Google Fonts内では7種類の日本語フォントを利用することができます。

Google Fontsで、可読性をありつつ、親しみやすさなら“丸ゴシック”のZen丸ゴシックがおすすめです。可愛げがあるフォントで太さの種類も他の丸ゴシックフォントに比べて多いので、幼稚園や介護施設などの温かみと柔らかさかつ信頼感を表現したいWEBサイトの文章にもぴったりです。

Zen Tokyo Zooというインライン英語のフォントもおすすめです。デザインのアクセントとして効果的です。

Zen Tokyo Zooはアルファベット小文字が用意されていません。小文字を入力した際は大文字のデザインのまま文字サイズが小さくなります。また、数字も小文字として扱われるため、併用する際は注意が必要です。

Robotoファミリー

Robotoは、GoogleのChristian Robertsonによって開発された英数字フォントでChromeやAndroidにもデフォルトで採用されています。幅広で均一のデザインをしており、現代的なデザインとの相性が良いです。初めはサンセリフ体のみでしたが、数年後にRobotoを元にRoboto Slabというスラブセリフ体のフォントも登場しています。英数字はRoboto、日本語部分はNotoという使い方をしているWEBサイトもあるくらい洗礼されたデザインです。

まとめ

今回はWEBサイトで使用されるフォントについて解説し、WEBサイトで使えるおすすめのWEBフォントについて紹介しました。

WEBフォントサービスのフォントは、紹介した以外にも膨大な量が公開されています。Google FontsやAdobe Fontsのフォント一覧を見るだけでもWEBサイトやバナーのデザインのインスピレーションが高まります。ホームページの制作する際やリニューアルしたい際にも一度WEBフォントの導入について考えてみることをおすすめします！