Webフォントとは?仕組みとメリット・デメリットを初心者向けに解説

せっかく選んだ書体でWebページを作ったのに、別のパソコンやスマートフォンで見たら違う書体で表示されていた、という経験はないでしょうか。

これは、Webページの文字が「見る人の端末に入っているフォント」で表示されるのが基本だからです。

この問題を解決するのが、Webフォントという仕組みです。

この記事では、Webフォントとは何か、どんな仕組みで表示されるのか、メリット・デメリット、CSSでの基本の書き方までを初心者向けに解説します。

Webフォントの基本

まずはWebフォントとは何か、そして端末に入っているフォントとどう違うのかを押さえましょう。

Webフォントとは何か

Webフォントとは、サーバーに置いたフォントのデータを、Webページを表示するときにダウンロードして使う仕組みのことです。

フォント(文字のデザインをデータにしたもの)は、本来はパソコンやスマートフォンに「インストール」して使うものです。

Webフォントを使うと、見る人の端末にそのフォントが入っていなくても、ページを開いたときにフォントのデータが一緒に届くため、作り手が指定した書体で文字を表示できます。

書体とフォントの言葉の違いについては、フォントと書体の種類の知識、文字の見せ方全体の考え方はタイポグラフィとは?で解説しています。

Webフォントを使わないとどうなるか

Webフォントを使わない場合、ブラウザは見る人の端末に入っているフォントの中から文字を表示します。

このような、端末にもともと入っているフォントを「デバイスフォント」や「システムフォント」と呼びます。

CSS(Webページの見た目を指定する言語)で書体を指定しても、その書体が端末に入っていなければ、ブラウザは別の書体に置き換えて表示します。

そのため、MacとWindows、iPhoneとAndroidのように環境が変わると、同じページでも文字の見た目が変わってしまいます。

季節の和菓子をお届けします

作り手が意図した表示(明朝体)

季節の和菓子をお届けします

指定した書体が端末に無く、別の書体(ゴシック体)に置き換わった表示のイメージ

左の見本は作り手が意図した明朝体の表示、右は指定した書体が見る人の端末に無く、別のゴシック体に置き換わってしまった場合のイメージです。

同じ文章でも、書体が変わるだけで上品な印象から親しみやすい印象へと雰囲気が大きく変わります(明朝体とゴシック体の違いとは?)。

Webフォントを使えば、どの環境でも左のような意図どおりの表示に近づけられます。

Webフォントが表示される仕組み

Webフォントは、ブラウザが「この文字にはこのフォントを使う」という指定を見つけてから、フォントのデータを取りに行くという順番で表示されます。

大まかな流れは次のとおりです。

1. ページを開くブラウザがHTMLとCSSを読み込む

2. 指定を見つけるCSSに書かれたWebフォントの指定を見つける

3. ダウンロードサーバーからフォントのファイルを取得する

4. 文字を表示届いたフォントで文字を描き直す

ポイントは、3のダウンロードが終わるまで、Webフォントでの表示はできないという点です。

フォントのファイルが大きいほど待ち時間が長くなるため、Webフォントには「表示速度」という課題がついて回ります(表示を速くする方法はWebフォントの読み込み速度とは?で解説しています)。

フォントのファイル形式はいくつかありますが、現在はWeb向けに圧縮効率を高めた「WOFF2(ウォフツー)」という形式が推奨されています(MDN「@font-face」)。

Webフォントのメリット・デメリット

Webフォントは見た目をそろえられる便利な仕組みですが、良いことばかりではありません。

メリットとデメリットを並べると、次のようになります。

観点	メリット	デメリット
見た目	どの端末でも、作り手が選んだ書体でほぼ同じように表示できる	フォントの読み込みが終わるまで、文字が見えない・別の書体で表示されるといった時間ができる
表現の幅	端末に入っていない書体や、ブランドに合わせた書体も使える	書体を増やしすぎると、デザインに統一感がなくなりやすい
表示速度	─	フォントのダウンロードが増える分、ページの表示が遅くなることがある
ルール	─	フォントごとに利用条件(ライセンス)があり、Webでの利用が認められているか確認が必要

特に注意したいのは、表示速度とライセンスの2つです。

Webフォントのファイル、特に日本語のフォントは文字数が多いぶん大きくなりやすく、使い方を誤るとページ全体が重くなります。

アルファベットのフォントは、大文字・小文字・数字・記号を合わせても数百字ほどで足りますが、日本語のフォントはひらがな・カタカナ・漢字などを合わせて数千〜2万字以上を収録しています。

その1文字ずつの形のデータがファイルに入っているため、欧文のフォントが数十KB程度で済むことが多いのに対し、日本語のフォントは1つの太さだけで数MBになることもあります。

そのためGoogle Fontsのように、日本語のフォントを小さなファイルに分けて、ページで使われている文字を含む分だけを読み込ませる工夫をしているサービスもあります(日本語Webフォントが重い理由と軽く使う工夫は、日本語Webフォントとは?で解説しています)。

また、パソコンで使えるフォントだからといって、Webフォントとして配信してよいとは限りません。

フォントには「どこで・どのように使ってよいか」を定めたライセンス(利用許諾)があるため、使う前に必ず各フォントの規約を確認しましょう。

お金を出して購入したフォントでも、パソコンでデザインを作るための許可と、Webサーバーに置いて不特定多数の人に配信するための許可は、別になっていることがあります。

ライセンスの確認ポイントは、フォントライセンスとは?で解説しています。

WebフォントをCSSで使う方法

ここでは、WebフォントをCSSで指定する基本の書き方を見ていきます。

細かい設定よりも、「何をどこに書くのか」の全体像をつかむことを目指しましょう。

使い方は大きく2通り

Webフォントの使い方には、大きく分けて「フォントサービスを使う方法」と「自分でフォントファイルを置く方法」の2通りがあります。

方法	やること	向いている人
フォントサービスを使う	サービスが用意したコードをHTMLやCSSに貼り付ける	初めてWebフォントを使う人、手軽に導入したい人
自分でファイルを置く(セルフホスティング)	フォントファイルを自分のサーバーに置き、CSSの@font-faceで読み込む	読み込み方を細かく管理したい人

初心者は、まずはフォントサービスで試してみるのが手軽です。

代表的なものに、Googleが提供する無料のフォントサービス「Google Fonts(英語)」があり、サイト上で選んだ書体の読み込みコードをコピーしてHTMLに貼るだけで使えます(Google Fontsの使い方や、Adobe Fontsなど他のサービスとの違いはGoogle Fontsとは?で解説しています)。

たとえばGoogle Fontsで「Noto Sans JP」を選ぶと、次のような数行のコードが表示されるので、HTMLの<head>の中に貼り付けます。

<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="stylesheet">

あとはCSSでfont-family: "Noto Sans JP", sans-serif;のように書体名を指定すれば、そのフォントで文字が表示されます。

この方法なら、フォントファイルを用意したり、次に紹介する@font-faceを自分で書いたりする必要はありません。

また、Google FontsのフォントはWebでの利用も認められたオープンなライセンスで公開されているので、初めてWebフォントを試すならここから始めると安心です。

@font-faceでフォントを登録する

自分でフォントファイルを置く場合は、CSSの@font-faceという書き方で、「このファイルを、この名前のフォントとして使う」とブラウザに登録します。

たとえば、サーバーのfontsフォルダに置いたフォントファイルを「MyFont」という名前で登録するには、次のように書きます。

@font-face {
  font-family: "MyFont";
  src: url("fonts/myfont.woff2") format("woff2");
  font-weight: 400;
}

font-familyにはCSSの中で呼び出すときの名前を、srcにはフォントファイルの場所と形式を書きます。

font-weightはウェイト(文字の太さ)を表し、400は標準の太さです(ウェイトについてはフォントの「太さ(ウェイト)」で解説しています)。

太字も使いたい場合は、太字用のファイルをもう1つ@font-faceで登録するのが基本です。

font-familyで使う書体を指定する

登録したフォントは、font-familyというプロパティ(CSSで見た目を指定する項目)で、文字に適用します。

@font-faceの中にもfont-familyが出てきましたが、この2つは役割が違います。

@font-faceの中のfont-familyは「このファイルに『MyFont』という名前を付けて登録する」もの、bodyなどに書くfont-familyは「登録した『MyFont』という名前を呼び出して使う」ものです。

このとき、Webフォントの名前だけでなく、読み込めなかったときの「代わりの書体」も続けて書いておくのが基本です。

body {
  font-family: "MyFont", "Hiragino Sans", "Yu Gothic", sans-serif;
}

ブラウザは左から順番に書体を探し、使えるものが見つかった時点でその書体を使います。

最後に書いたsans-serifは「総称ファミリー」と呼ばれるもので、「何でもよいのでゴシック系(サンセリフ)の書体で」という意味の最後の保険です(MDN「font-family」)。

明朝系(セリフ)の書体を使う場合は、最後をserifにします。

Webフォントの読み込みに失敗したり、時間がかかったりしても、この指定があれば近い雰囲気の書体で文字が表示されます。

CSSの書き方そのものに慣れていない場合は、CSSとは?もあわせて読んでみてください。

実践のポイント

Webフォントを使い始めるときにつまずきやすい点と、よくある疑問をまとめます。

注意点・よくある間違い

見出し用・本文用・太字用と、書体やウェイトをいくつも読み込んでしまうことがあります。
読み込むファイルが増えるほど表示は遅くなるので、本当に必要な書体とウェイトだけに絞りましょう。
ウェイトの使い分け方は、書体のバリエーションとはで解説しています。
日本語のWebフォントを、欧文(アルファベット)のフォントと同じ感覚で気軽に使ってしまうことがあります。
日本語のフォントは収録する文字数が非常に多く、ファイルが大きくなりやすいので、使う範囲や読み込み方に工夫が必要です。
パソコンにインストールしているフォントを、そのままWebフォントとしてサーバーに置いてしまうことがあります。
デスクトップでの利用は許可されていても、Webでの配信は別の契約が必要な場合があるので、必ず各フォントの規約を確認しましょう。
font-familyにWebフォントの名前だけを書き、代わりの書体を書き忘れることがあります。
読み込みに失敗したときに意図しない書体で表示されないよう、最後にはsans-serifやserifを書いておきましょう。

よくある質問

Q. Webフォントは必ず使ったほうがいい?
A. 必ずではありません。
読みやすさと表示の速さを優先するなら、本文は端末に入っているフォントのままにするのも立派な選択です。
ブランドの印象を出したい見出しやロゴまわりなど、書体の違いが効く場所から使うのがおすすめです。
Q. Webフォントを使うと、文字はどこでもまったく同じに見える?
A. 書体はそろいますが、画面の解像度やOSごとの文字の描き方(にじみ方や太さの見え方)の違いがあるため、完全に同じになるわけではありません。
「ほぼ同じ書体で表示できる」と考えておきましょう。
Q. 無料で使えるWebフォントはある?
A. あります。
代表的なのはGoogle Fontsで、日本語の書体も含めて無料で使えるフォントが多数公開されています。
ただし無料のフォントにもライセンスがあるので、利用条件は必ず確認してください。