Webフォントの仕組みと使い方、メリット・デメリットとは？
スクリーン上のテキストはPCやスマートフォンにインストールされているフォントで表示されます。デザイナーはPCやスマホのデバイスに存在するフォントを使用するのが一般的です。例えばOSがWindows 11なら游ゴシック、古い環境ならメイリオ、Mac OSならヒラギノといった感じです。
しかし、システムフォントではインパクトに欠けるケースもあります。あえて違和感を出したり、目を引くような表現にしたり、違うフォントを使い特長を出したいという場合にWebフォントを使用します。Webフォントはデバイスにないフォントを使うことで表現の幅を広げることができます。
Webフォントを使うとどうなる？
PCやスマホのデバイスにインストールされていないフォントを使うことができます。デバイスごとにフォントを変える必要もありません。デバイスが異なっても画面サイズは変わるだけでフォントを一緒にできます。フォントのインストールが不要なので余計なものをデバイスに入れる必要はありません。
ライセンスの問題はありますが、使用フォントの種類が増えるので表現の幅が広がります。あえて手書き調のフォントを使用することもできます。自分好みの色付けしやすくなることがメリットといえます。
Webフォントの使い方
Webフォントはその名の通りWeb上にあるフォントを使用します。ページが表示する際にWeb上のフォントを読み込み表示します。Webフォントを使いたい場合、フォントを自社サーバーにアップロードする、またはWebフォントサービスを利用します。自社サーバーにアップロードする場合は使用ライセンスを確認しましょう。表示回数に応じて費用が異なる従量課金のものもありますので。
なお、Webフォントはサービス提供しているものもあります。この場合は自社サーバーへのアップロードは不要です。Webフォントサービスは多くが欧文フォントですが、日本語フォントもあります。Googleが提供するGoogle Fontsは無料で利用できるので制作会社で使用されるケースが多いです。
Google Fontsについて
Webフォントを使用する場合、大半が無料のGoogle Fontsとなることでしょう。なのでGoogle Fontsの使い方を解説します。Google Fontsを使用する流れは以下です。
- Google Fontsへアクセスし使いたいフォントを選ぶ
- 使用するWebフォントの埋め込みコードを取得
- 使用するページのHEADタグ内に埋め込みコードを記述
- 使用したい箇所のCSSで埋め込んだフォント指定する
②〜④はコーダーの方は慣れているはずなので特に気にする必要はないでしょう。ディレクターやデザイナーの方は①の使うフォントの選定だけで良いかと。
Google Fontsは種類が豊富なのですが、ゴシック体なら「Noto Sans JP」が多いでしょうか。他にもあるので色々と見比べてください。
実際に「Noto Sans JP」を使う場合、下記埋め込みコードをHEADタグ内に記述します。
これをPタグのフォントとして反映させたい場合はCSSに下記のように記述します。
p {
font-family: "Noto Sans JP", serif;
}
以上なのですが、上記埋め込みコードは「Noto Sans JP」のウェイト9種類全てを読み込むことになるため重くなってしまいます。なので実際には下記のように使用するウェイトのみを限定して読み込みます。
（通常サイズのみ）
<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=Noto+Sans+JP&display=swap" rel="stylesheet">
（通常サイズと太字）
<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=Noto+Sans+JP:wght@400;700&display=swap" rel="styleshe>
このように使用したいフォントとウェイトを選択して埋め込みます。
Webフォントのデメリット
Webフォントのデメリットは使用する種類が増えると読み込み時間が増えることです。特に日本語フォントは欧文フォントよりもファイスサイズが大きいので注意が必要です。見た目優先で色々と使用するのではなく、限定した使い方をしないと表示時間に影響します。
SEO的に考えると使用するメリットがないので使う時は欧文2〜3ウェイト程度に留めておく方と無難です。日本語フォントはSEOとして考えるとあまりおすすめしません。弊社でも使うケースはあるのですが、PageSpeed Insightsにわずかでも影響があるのでできれば控えたいというのが本音となります。
PageSpeed Insightsへの影響
前述の通りWebフォントはPageSpeed Insightsに影響があります。前記事にある通り、Webフォントを使用することで2点減点となりました。たった2点ではありますが、FCP（First Contentful Paint）にマイナスの影響がありました。
ただし、Webフォントを使用しても100点獲得も可能です。欧文フォントでウェイトを限定すればFCPへそこまで影響を与えない（2025年2月時点）ので限定した使い方をすることをおすすめします。