Webフォントとは？使うメリットやおすすめフォントを紹介！

Webフォントとは

Webフォントとは、インターネット上にあるフォントデータを活用できる技術のことです。インターネット上のサーバーに格納されたフォントや、インターネット上で提供されているフォントを呼び出して、Webサイトに反映させることができます。

Webサイトのデザインにおいて、フォントは重要な要素のひとつです。Webフォントを活用することで、閲覧者の端末環境に依存せず、Webサイトの制作者が意図したデザインで閲覧者の端末に表示させることができます。

これまでは、Webサイトの制作者が指定したフォントの中から、閲覧者のWebブラウザが各端末にインストールされているフォントを表示していました。

しかしこの従来の方法では問題点が大きく2つありました。

• 必ずしも意図通りのフォントでの表示ができない

なぜなら、一般的な閲覧者がもつ端末にインストールされているフォントは多くなく、さらにWindowsとMacではデフォルトで用意されているフォントに違いがあるため、制作者が意図するフォントが閲覧者の端末にインストールされていない場合があるのです。

その場合は、別のフォントが代用で表示され、結果として意図と異なるフォントが表示されてしまいます。せっかくWebサイトのコンセプトやデザインにあわせてフォントを選んで指定しても、指定外のフォントで表示されることも少なくないのです。

• デフォルトでインストールされているフォントはデザイン性が高くない

デザイン性の高いWebサイトの多くは、フォントもデザインのひとつの要素としてこだわる傾向があります。特に文章の見出しやボタンなど目立たせる必要がある要素は、その傾向が顕著です。もちろん本文のフォントも同様に重要な要素です。

しかし、デフォルトでインストールされているフォントはデザイン性が高くないため、意図するコンセプトやデザインを表現することが難しい場合があるのです。

その場合の解決策として、文字を希望通りのフォントで表示した画像を用意して表示させる方法があります。しかし、この方法だと修正や更新時に画像の修正が必要になり、運用コストが嵩むデメリットが生じるのです。

これら2つの問題点を解決するのが、Webフォントです。

サイト訪問者がWebサイトを閲覧するタイミングで、インターネット上にあるフォントデータをダウンロードするため、いずれの端末を使って閲覧しても同一フォントで表示でき、さらに用意されているフォントの数も豊富なため、制作者の意図するデザインでWebサイトを表示することができるのです。

Webフォントを使うメリット

Webフォントを使うメリットは大きく5つあります。

メリット1：コンセプトに合わせたWebサイトの構築が可能

Webサイトには、それぞれのコンセプトやトーン&マナー（トンマナと呼ばれます）が存在します。Webサイトの目的によってそれは決められているのです。

そして、フォントはそれを決定づけ、ユーザーに訴求するための重要な要素のひとつなのです。端末にデフォルトでインストールされている汎用フォントでは表現できないコンセプト・デザインも、インターネット上にある豊富な種類から選ぶことができるWebフォントであれば表現可能になります。

メリット2：閲覧端末に依存せず同一デザインで表示が可能

ユーザーがWebサイトを閲覧するための端末はPC、スマートフォン、タブレットなど多岐に渡ります。メーカーや機種によって、デフォルトでインストールされているフォントは異なるのが現状です。汎用フォントを使って構成されたWebサイトはこういった端末差にデザインが左右される場合があります。

しかしWebフォントは、閲覧開始のタイミングでインターネット上からフォントをダウンロードして表示させます。そのため閲覧端末がもつフォントの種類に関係なく、すべての端末で同一のフォントを表示することが可能です。

そのため、フォントの違いでデザインが崩れることも、意図しないデザインで表示されることもないのです。

メリット3：SEO効果が高くなる

汎用フォントは種類が少なくデザイン性が高くないため、高いデザイン性を保持したまま従来の方法でWebサイトを構築しようとすると、文字情報のいくつか、もしくはすべてを画像で表現する必要があります。

しかし、検索エンジンでの検索結果表示順を評価するクローラーは画像を画像として処理するため、画像で作成した文字情報は理解されにくいのです。画像としての文字よりもテキストデータのほうが理解される情報が多いため、テキストデータの方が掲載順を決めるための評価があがると考えられているのです。

また、画像数に伴い、データ通信量が減ることでページの表示速度があがれば、それもSEOでの評価が上がる要因になります。

メリット4：内容の修正・更新が容易

デザイン性を保持するために文字を画像として表示させている場合、内容の修正や更新が生じた際に、画像の修正が必要となります。しかし画像はテキストデータと違い、専用ソフトで編集するなどの処理が必要なため、修正・更新に手間がかかるのです。場合によっては専門スキルを要する人材が必要にもなります。

一方、Webフォントであれば、文書作成ソフトと同様に文字を修正・更新することができるので運用が容易です。更新頻度が高ければ高いほど、この効果のメリットは大きくなります。

メリット5：自動翻訳・音声読み上げに対応可能

文字情報として処理できるため、自動翻訳にも対応可能です。もし対象のWebサイトが海外のユーザーにも訴求したい内容であれば、海外の閲覧者に対してもメリットがあるのです。

また、同様の理由で視覚障害者の方のための音声読み上げソフトにも対応するため、閲覧者の幅を狭めることなく、豊富な種類のフォントを使用できることもポイントのひとつです。

音声読み上げ機能が使えるため、Google HomeやAmazon Echo、LINE Clovaなどのスマートスピーカー（AIスピーカー）にも対応できます。

Webフォントを使う際の注意点

メリットをいくつかあげましたが、実際にWebフォントを使う際は注意しないといけない4点をご紹介します。

注意点1：費用が発生する場合がある

Webフォントはインターネット上にいくつも存在していますが、それらの中には利用するのに費用が発生するものがあります。有料のフォントはWebフォント提供元への一括支払いか、閲覧(PV)数による従量課金に分類されます。

従量課金とは、例えば1万PVまでは月額5,000円、1万PVを超えたら超過分は1,000PVあたり500円の追加料金を支払う、というような契約形態です。

また、無料で利用できるWebフォントの場合も、ライセンス表示や商用利用不可など条件が設定されているものもあります。利用時はしっかりと規約などを読み込むようにしましょう。

注意点2：フォントデータが重いとページの表示速度が遅くなる

Webフォントは、Webサイト閲覧時にインストールしてフォントを表示します。そのため、Webフォントのデータが重いとインストール時に負荷がかかってしまいます。その負荷によりページの表示速度が遅くなってしまう可能性があります。

Webフォントのメリットとしてページ速度の改善の可能性を挙げましたが、使い方によっては逆効果になる可能性があるのです。表示速度はSEOに影響がありますので、極端に表示速度が遅くなるようであれば改善の対策が別途必要になります。

注意点3：日本語対応のWebフォントが少ない

日本語は、ひらがな、カタカナ、漢字など文字数が他言語と比較して多いのが特徴のひとつです。そのため、英語と比べて日本語に対応しているWebフォントが少ないのが現状です。気に入ったWebフォントを見つけても日本語には未対応ということもあります。

各Webフォントのサービスでは、和文フォントかどうか、絞り込んで検索して探せるので、フォント選択の際は検索機能を活用しましょう。

注意点4：利用にCSSの技術が必要

Webフォントを利用する場合は、CSSというプログラミング言語で設定（記述）が必要となります。CSS（Cascading Style Sheets）とは、Webサイトの見え方をコントロールするための言語です。Webフォントの設定もCSSで行われるため、利用するためにはCSSに関する知識・技術が必要になります。

具体的には、Webフォントをどこからインストールするのかという命令と、インストールしたWebフォントをどこのテキストデータに反映させるのかという命令を記述する必要があります。

技術を持つ専任担当を用意するのもいいですが、習得に膨大な時間がかかるような難解な技術ではないため、必要であればサイトの運営担当者が覚えてしまうのがいいでしょう。

おすすめWebフォント〜無料〜

無料で利用可能なWebフォントは探せば大量に出てきますが、その中でも特におすすめなのはGoogle Fontsです。

その名の通りGoogleが提供するWebフォントで、アカウント登録が不要で商用利用含め完全無料で利用することができます。導入の手間も少なく、初めての方でも簡単に利用できるサービスといえます。もちろん日本語のフォントも用意されています。

導入するにはGoogle Fontsのページにアクセスし、使いたいフォントを選ぶだけです。用意されたWebフォントはブラウザ上でそのフォントを使ったサンプル文言を表示しています。実際の見え方が確認できる点も嬉しいポイント。各フォントは用意されていれば文字の太さや斜体を使うかどうかの設定も可能です。

利用したいフォントが決まれば、表示されている読み込みコードをコピーしてWebサイトのコード内にペーストするだけです。あとは利用したいテキストデータの箇所をCSSで指定します。

検索エンジンサービスで有名なGoogleが提供しているだけあり、1,000近いフォントから好みのフォントを検索する機能も豊富に用意されているため、きっとお気に入りのフォントを探し出せるでしょう。

おすすめWebフォント〜有料〜

続いて、有料版のおすすめWebフォントをご紹介します。無料ではありませんが、その分クオリティの高いWebフォントを選ぶことができます。

特にデザインに凝ったWebサイトの構築をする場合はぜひ活用してみてください。

おすすめ1： TypeSquare

日本のフォントメーカーとして有名な株式会社モリサワが提供しています。フォントといえばモリサワと言えるほどマーケットシェアがありますのでご存知の方も多いのではないでしょうか。

携帯電話やテレビのテロップなど、様々なシーンで使われているお馴染みのフォントなど、国内外問わず多くのフォントメーカーとの協力したMORISAWA PASSPORTに含まれる1,000以上のフォントを使用することが可能です。

料金プランとしては、月間1万PVまでは無料、月間25万PVまでは月額2,160円（超過10万PV毎540円加算）、月間100万PVまでは月額4,320円（超過10万PV毎540円加算）がスタンダードプランになります。閲覧数の違いの他に使用可能なドメインなどにもプランによって条件が異なります。月間100万PVを超えるWebサイトにはアドバンスドプランが用意されています。

おすすめ2：Adobe Fonts

Creative Cloud サブスクリプションプランを購入することで、すべてのフォントの利用が可能です。追加料金はなく、個人利用はもちろん商用利用も可能です。Webフォントとしての利用だけでなく、Adobe製品上でも利用可能になりますので、デザイナーやイラストレーターの方などAdobe製品も利用する方におすすめです。

おすすめ3：FONT+（フォントプラス）

ソフトバンク・テクノロジー株式会社が提供するバラエティ豊かなプロ向けのフォントが使えることを謳うWebフォントです。

1ライセンスで豊富な欧文・和文フォントをいくつでも利用可能で、さらに導入ドメイン数も無制限です。料金プランは予め決めた閲覧数を上限にしたチケットを購入する方式なのでコスト管理が明白なのも特徴のひとつです。

また、使用文字のみ読み込み、データの通信量を抑えることでページの表示速度の低下を抑えることができる点もメリットとして挙げられます。

ユーザーが利用しているフォントをランキングで紹介しているので、どのようなフォントがいいか迷われている方は参考にしてみるといいでしょう。

おわりに

以上、Webフォントについて、導入メリットと注意点、さらにおすすめのWebフォントについて紹介しました。

Webフォントを使えば、より幅広いコンセプトやデザインを表現することができます。それぞれのWebサイトに合ったWebフォントを見つけて活用してみてください。

WEBでのお問い合わせはこちら