Webフォントとは|メリット・デメリットから導入方法まで
Webサイトのテキストに適用されるフォントは、文章の可読性・視認性や媒体の印象を左右する重要な要素です。Web業界でフォント選びの重要性が高まる中、近年トレンドとなりつつあるのが「Webフォント」の活用です。
フォントについて意識していない場合は、Webフォントという言葉をほとんど聞いたことがない方も多いでしょう。
今回は、Webフォントの概要や、導入するメリット・デメリットなどを解説します。Webフォントについて詳しく知りたい方は参考にしてください。
1. Webフォントとは?
Webフォントとは、インターネット上に設置されたフォントサーバーから読み込んだフォントを使用し、Webサイトに適用するフォントのことです。現在では、フォントサービス事業者がさまざまなWebフォントを提供しており、ライセンスを購入すると使用することができます。
Webフォントは、従来のシステムフォントにはない多くのメリットがあるため。Web制作の場面などでよく使われる傾向です。
1-1. デバイスフォントとの違い
Webフォントに対して、これまで使用されてきた一般的なフォントのことをデバイスフォントと言います。デバイスフォントは、元々の端末にインストールされているフォントを使用する仕組みであるため、システムフォントと呼ばれることもあります。
デバイスフォントはWebフォントと異なりライセンスを気にする必要がなく、端末内部からフォントデータを読み込むため、表示速度が速いことが特徴です。しかし、デバイスフォントは種類が少なく、端末ごとにインストールされているフォントも異なることから、デバイスごとで表示を統一することが難しいという課題があります。
2. Webフォントのメリット・デメリット
近年のインターネット業界では、Webフォントの利用が推奨されている傾向です。しかし、Webフォントにはメリットとデメリットの両面があります。Webフォントの活用を検討している方は、メリット・デメリットの両方を知っておきましょう。
ここでは、Webフォントのメリット・デメリットを解説します。
2-1. メリット(1)マルチデバイスに対応している
Webフォントはフォントデータがインターネット上に存在するため、閲覧者側の利用デバイスにかかわらず、サイト制作者が意図したフォントを表示できます。近年では当たり前となりつつある、レスポンシブデザインとの相性も抜群です。
デバイス間でフォントを統一することは、企業イメージ・企業ブランドの演出にも重要です。均一のフォントを表示するメリットは大きいと言えるでしょう。
2-2. メリット(2)デザイン性の高いフォントを使える
多くのWebフォントはデザイン性に優れており、美しく見栄えの良い文字を表示することが可能です。Webサイトのイメージに合ったWebフォントを使用することで、イメージアップや競合との差別化を図れます。
また、Webフォントは音声の読み上げに対応しており、検索エンジンも文字情報として認識します。画像化する必要がなくなるうえ、SEOの観点からも効果を期待できるでしょう。
2-3. デメリット(1)読み込みに時間がかかる
Webフォントはフォントデータを読み込んで表示するため、閲覧環境によっては読み込みに時間がかかる場合があります。特に、Webフォントを使用している箇所が多い場合や、複数の種類のWebフォントを使用している場合は注意が必要です。
Webフォント技術が向上し、ブロードバンドが普及した現代においては、読み込み速度が大きなデメリットとなるケースは減少傾向にあります。しかし、日本語フォントはデータ容量が重い傾向にあることから、Webフォントが表示される時間について留意しておきましょう。
日本語のWebフォントを使用する際には、「サブセット化」と呼ばれるあまり使わない文字を取り除き、軽量化する方法を行うことがおすすめです。
2-4. デメリット(2)日本語フォントの選択肢が乏しい
Webフォントの大きなデメリットとして、リリースされている日本語フォントの種類が少なく、フォントの選択肢が乏しい点が挙げられます。また、日本語フォントは収録文字数が非常に多く、選択したフォントによっては使いたい文字(漢字)が対応していないケースもあります。
近年では、技術の進歩により上記のデメリットは払拭されつつありますが、Webフォントを使用する際は上記のデメリットに直面する可能性も考慮しておきましょう。
3. 【Google Fonts】Webフォントの導入方法
Webフォントの活用を検討しているものの、実際の導入方法が分からない方は多いでしょう。Webフォントを導入する場合は、Googleが提供する「Google Fonts」の利用がおすすめです。
ここでは、Google Fontsを基にWebフォントの導入方法を解説します。
3-1. 【STEP1】「Google Fonts」で使いたいフォントを探す
Google Fontsとは、Googleが提供するWebフォントを無料で利用できるサービスです。まずは「Google Fonts」にアクセスして、使いたいWebフォントを探しましょう。
以前は+ボタンをクリックすると、フォントをお気に入りとして保存することができましたが、2021年7月時点ではできないようになっています。
3-2. 【STEP2】HTMLで指定コードを追加する
使用したいWebフォントが決まったら、コード(ソース)を表示します。表示されたコードをコピーして、Webフォントを適用したいWebサイトのページにペーストしましょう。たとえば、「Roboto thin 100」のWebフォントの場合は、下記の部分をコピー&ペーストします。
〇<head>にコピー&ペーストするHTMLコード
<link rel = “preconnect” href = “https://fonts.googleapis.com”>
<link rel = “preconnect” href = “https://fonts.gstatic.com” crossorigin>
<link href = “https: //fonts.googleapis.com/css2?family = Open + Sans:wght @ 300&family = Roboto + Slab:wght @ 100&family = Uchen& display = swap “rel =” stylesheet “>
コードは3種類表示されますが、今回はスタイルシートを使用するため、上記の中から一番下のコードを選択します。
〇<body>内のWebフォントを適用したい部分にコピー&ペーストするHTMLコード
<p class=”rr_Roboto”> Google Web Fonts Roboto</p>
クラス名は使いやすい任意の名称を付けておきましょう。「Google Web Fonts Roboto」の部分は、Webフォントが適用される部分となります。
3-3. 【STEP3】CSSでフォントの設定を行う
続いて、表示されているCSSをコピーして、Webフォントを使用するWebサイトのCSSファイルにペーストしてfont-familyを指定します。
〇 CSSにfont-familyを指定する
p. rr_Roboto{
font-family: ‘Roboto Slab’、セリフ;
}
HTML・CSSの記述が完了したら、「Google Web Fonts Roboto」の部分にWebフォントが正しく適用されているかどうか、Webブラウザで表示して確認してみましょう。
まとめ
Webフォントはデザイン性に優れており、デバイスの種類にかかわらず美しいフォントを表示できます。Webサイトのデザインに合ったWebフォントを使用することで、視認性の向上からブランディングまで幅広い効果が期待できるでしょう。
読み込みの遅さやフォントの選択肢の少なさなど、デメリットもいくつかあるものの、現在は徐々に払拭されている状態です。自社サイトの文字装飾について検討しているWeb担当者の方は、Webフォントの活用をおすすめします。