6日でできる 新HTML&CSS入門｜Webフォントの利用

文字の印象が変わると、Webサイトの雰囲気も変わる。
Webフォントを使って、どの端末でも統一感のある美しい文字デザインを表現しよう。

Webサイトの印象は、色や画像、レイアウトだけで決まるわけではありません。文字の形、太さ、読みやすさも、デザイン全体の雰囲気に大きく影響します。たとえば、やわらかい雰囲気のサイトでは丸みのあるフォントが合いやすく、ビジネス向けのサイトではすっきりした読みやすいフォントが使われることが多いです。

通常、Webページの文字は、ユーザーが使っているパソコンやスマートフォンに入っているフォントで表示されます。そのため、同じHTMLとCSSを書いていても、Windows、Mac、Android、iPhoneなど、環境によって表示される書体が少し変わることがあります。

この違いを少なくし、制作者が意図した書体をWebページ上で表示しやすくする仕組みがWebフォントです。Webフォントを使うと、ブラウザがインターネット上のフォントデータを読み込み、そのフォントをページ内の文字に適用できます。

Webフォントを利用する代表的な方法のひとつがGoogle Fontsです。Google Fontsを使うと、HTMLのhead内にlinkタグを追加し、CSSでfont-familyを指定するだけで、さまざまなフォントをWebページに取り入れられます。

この記事では、Webフォントの基本的な仕組み、Google Fontsを使う流れ、HTMLとCSSでの指定方法、通常フォントとの違い、導入時に気を付けたいポイントを、サンプルHTMLを使いながら分かりやすく解説していきます。

Webフォントとは何か

Webフォントとは、Webページを表示するときに、ブラウザが外部のフォントデータを読み込んで文字を表示する仕組みです。

通常のフォント指定では、ユーザーの端末に入っているフォントが使われます。たとえば、WindowsにはWindowsでよく使われるフォント、MacにはMacでよく使われるフォント、スマートフォンにはスマートフォン用のフォントがあります。そのため、CSSで同じfont-familyを指定しても、端末によって表示が変わることがあります。

Webフォントを使うと、フォントデータをWeb上から読み込むため、端末にそのフォントが入っていなくても、指定した書体で表示しやすくなります。

表示方法特徴
端末内の標準フォントユーザーのOSや端末に入っているフォントで表示される
WebフォントWeb上からフォントデータを読み込み、指定した書体で表示する

Webフォントは、サイトの雰囲気を統一したいときや、ブランドイメージに合った文字デザインを使いたいときに便利です。特に、見出しやキャッチコピーなど、印象を大切にしたい部分で効果を発揮します。

図1：Webフォントは外部からフォントを読み込んで表示する

この図から分かること

通常のフォント表示では、端末に入っているフォントによって見た目が変わることがあります。Webフォントを使うと、ブラウザが外部のフォントデータを読み込み、指定した書体で文字を表示できます。そのため、OSや端末の違いによる見た目の差を小さくしやすくなります。

フォントは文字デザインのセット

フォントとは、文字の形や太さ、幅、印象などをまとめた文字デザインのセットです。同じ文章でも、フォントが変わるだけで印象は大きく変わります。

たとえば、太く力強いフォントは見出しや広告に向いています。細くすっきりしたフォントは、説明文やビジネス系のページに向いています。丸みのあるフォントは、やさしい印象や親しみやすさを出したいときに使いやすいです。

フォントの特徴与えやすい印象
太い文字力強い、目立つ、見出し向き
細い文字上品、すっきり、落ち着いた印象
丸みのある文字やさしい、親しみやすい
角ばった文字シャープ、現代的、堅実

Web制作では、読みやすさとデザイン性のバランスが大切です。見た目が個性的でも、本文が読みにくいフォントではユーザーに負担がかかります。本文には読みやすいフォント、見出しには印象を作るフォント、というように使い分けるとよいでしょう。

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

Webフォントを使うと、Webサイトの文字デザインを整えやすくなります。端末ごとのフォント差を減らし、制作者が意図した雰囲気を表現しやすくなります。

メリット内容
表示の統一感を出しやすい端末に依存しにくく、指定した書体を使いやすい
ブランドイメージを作りやすいサイトの雰囲気に合った文字デザインを選べる
見出しを印象的にできるキャッチコピーやタイトルの見た目を整えやすい
無料で使えるサービスもあるGoogle Fontsなどを利用できる
CSSで管理できるfont-familyで適用範囲を調整できる

Webフォントは、サイト全体に適用することもできますし、見出しや特定のclassだけに適用することもできます。ページ全体を同じフォントでそろえたい場合はbodyに指定し、見出しだけ雰囲気を変えたい場合はh1やclassに指定します。

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

Webフォントは便利ですが、読み込みが必要なため、使いすぎるとページ表示に影響することがあります。特に日本語フォントは文字数が多く、フォントデータが大きくなりやすいです。

注意点内容
読み込み時間フォントデータを読み込むため、表示速度に影響することがある
使いすぎ多くのフォントや太さを読み込むと重くなりやすい
読みやすさデザイン性だけでなく本文の読みやすさも確認する
フォールバック読み込めない場合に備えて代替フォントを指定する

Webフォントを使うときは、必要なフォントと太さを絞ることが大切です。見出し用、本文用など、用途を決めて使うと、デザインも管理しやすくなります。

Google Fontsとは

Google Fontsは、Webフォントを利用できる代表的なサービスです。多くのフォントが用意されており、HTMLに読み込み用のlinkタグを追加し、CSSでfont-familyを指定することで利用できます。

日本語のWebページでは、Noto Sans JPのような日本語対応フォントがよく使われます。Noto Sans JPは、すっきりした読みやすい印象のフォントで、本文にも見出しにも使いやすい書体です。

Google Fontsを使う基本の流れは次のとおりです。

手順内容
1Google Fontsにアクセスする
2使いたいフォントを検索する
3フォントを選択する
4埋め込み用のlinkタグをコピーする
5HTMLのhead内に貼り付ける
6CSSでfont-familyを指定する

HTMLにlinkタグを貼り付けるだけでは、まだ文字には適用されません。CSSでfont-familyを指定して、どの要素にそのフォントを使うのかを決めます。

図2：Google Fontsはlinkで読み込み、CSSで適用する

この図から分かること

Google Fontsを使うには、まずHTMLのhead内でフォントを読み込みます。そのあと、CSSのfont-familyで適用する場所を指定します。linkタグで読み込むだけではなく、CSSでどの文字に使うかを指定するところがポイントです。

Google Fontsの使い方

利用の手順

Google Fontsの利用は簡単です。
基本的な流れは以下の通りです。

１．Google Fonts にアクセス

「https://fonts.google.com/」にアクセスします。

２．好きなフォントを選ぶ

ここでは「Noto Sans JP」を選択します。「Noto Sans JP」を検索します。

「Get font」ボタンをクリックします。

「Get embed code」ボタンをクリックします。

３．埋め込みコードのコピー

右側に表示されたリンクタグをクリックします。

Google Fontsの読み込みコード

Google Fontsでフォントを選ぶと、HTMLに貼り付けるためのlinkタグが表示されます。Noto Sans JPを使う場合、次のようなコードを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@100..900&display=swap" rel="stylesheet">

このコードは、Google FontsのCSSを読み込むためのものです。preconnectは、フォント関連のサーバーに事前接続するための指定で、読み込みをスムーズにする目的があります。

タグ・属性役割
link rel="preconnect"外部サーバーへ事前接続する
href接続先や読み込み先のURLを指定する
crossorigin別のドメインからの読み込みに関係する指定
link rel="stylesheet"外部CSSを読み込む

フォントを読み込んだら、CSSでfont-familyを指定します。

body {
  font-family: "Noto Sans JP", sans-serif;
}

font-familyでは、まず使いたいフォント名を書きます。その後ろにsans-serifのような代替フォントを指定します。これをフォールバックと呼びます。

font-familyとフォールバック

font-familyは、文字に使うフォントを指定するCSSプロパティです。複数のフォント名をカンマで区切って指定できます。

font-family: "Noto Sans JP", sans-serif;

この指定では、まずNoto Sans JPを使おうとします。もしNoto Sans JPが読み込めなかった場合は、sans-serifが使われます。sans-serifは、ゴシック体のような飾りの少ないフォントを意味する一般的な指定です。

指定意味
"Noto Sans JP"最初に使いたいWebフォント
sans-serifWebフォントが使えない場合の代替フォント
カンマ区切り左から順番に使えるフォントを探す

Webフォントを指定するときは、代替フォントも一緒に書いておくと安心です。通信環境や読み込み状況によってWebフォントが使えない場合でも、近い種類のフォントで表示できます。

WebフォントのサンプルHTML

ここでは、Google FontsのNoto Sans JPを読み込み、特定の文章だけにWebフォントを適用するサンプルを作ります。比較しやすいように、Webフォントを使う行と、端末の標準フォントで表示する行を用意します。

ファイル名： lesson45_1.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Webフォント表示の確認</title>
<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@100..900&display=swap" rel="stylesheet">
<style>
  body {
    font-size: 26px;
    margin: 40px;
    line-height: 1.8;
  }

  h1 {
    font-size: 1.4em;
  }

  .font-from-web {
    font-family: "Noto Sans JP", sans-serif;
    color: #2a5d84;
    font-weight: 600;
  }

  .font-standard {
    color: #444444;
  }
</style>
</head>
<body>
  <h1>Webフォントの表示確認</h1>

  <p class="font-from-web">この文章にはGoogle FontsのNoto Sans JPを適用しています。</p>
  <p class="font-standard">この文章は端末の標準フォントで表示されます。</p>
</body>
</html>

ブラウザの表示例

ブラウザで表示すると、font-from-webが付いた文章にはNoto Sans JPが適用されます。文字色は青系になり、font-weight: 600によって少し太めに表示されます。

一方、font-standardが付いた文章には、Webフォントを指定していません。そのため、ユーザーの端末やブラウザの標準フォントで表示されます。

このように、classを使うと、ページ全体ではなく特定の文章だけにWebフォントを適用できます。

サンプルHTMLの構造を確認する

このサンプルでは、head内でGoogle Fontsを読み込み、style内のCSSでフォントを適用しています。

部分役割
link rel="preconnect"Google Fonts関連サーバーへの接続準備をする
link rel="stylesheet"Google FontsのCSSを読み込む
class="font-from-web"Webフォントを適用する文章を指定する
font-family使うフォントを指定する
font-weight文字の太さを指定する
color文字色を指定する

Webフォントの利用では、読み込みと適用を分けて考えると分かりやすくなります。linkタグはフォントを読み込むための指定で、font-familyは読み込んだフォントを実際の文字に使うための指定です。

Webフォントをページ全体に適用する

サンプルでは特定のclassだけにWebフォントを適用しましたが、ページ全体に適用したい場合はbodyにfont-familyを指定します。

body {
  font-family: "Noto Sans JP", sans-serif;
}

このようにすると、body内の文字全体にWebフォントが適用されます。見出し、本文、リスト、フォームの文字など、基本的にはページ全体が同じフォントになります。

ただし、すべて同じフォントにすると単調に見える場合もあります。見出しだけ少し太くしたり、特定の部分だけ別の太さにしたりすると、読みやすいデザインになります。

h1 {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
}

p {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
}

font-weightを変えることで、同じフォントでも見出しと本文の印象を分けられます。

図3：Webフォントは全体にも一部にも適用できる

この図から分かること

Webフォントは、bodyに指定してページ全体に適用することも、classを使って特定の部分だけに適用することもできます。全体の統一感を出したい場合はbodyに指定し、見出しやキャッチコピーだけ印象を変えたい場合はclassや見出しタグに指定すると扱いやすくなります。

Webフォント導入で使うタグとCSS

Webフォントを導入するときによく使うタグやCSSを整理しておきます。

タグ・CSS・属性説明
link rel="preconnect"外部サーバーへの接続を事前に準備する
link rel="stylesheet"Google Fontsなどの外部CSSを読み込む
href読み込むURLを指定する
crossorigin外部ドメインとの接続に関係する指定
font-family使用するフォントを指定する
font-weight文字の太さを指定する
class特定の要素にCSSを適用するための名前を付ける
bodyページ全体にフォントを適用するときに使いやすい
h1、p見出しや本文に個別指定するときに使う

Webフォントは、HTML側のlinkとCSS側のfont-familyがセットです。どちらか一方だけでは意図した表示になりません。読み込みコードを入れたあと、必ずCSSで適用先を指定しましょう。

標準フォントとWebフォントの違い

Webフォントを学ぶときは、標準フォントとの違いを意識すると分かりやすくなります。

項目標準フォントWebフォント
フォントの場所ユーザーの端末内Web上のフォントデータ
表示の統一感端末によって差が出ることがある指定した書体でそろえやすい
読み込み追加読み込みは少ないフォントデータの読み込みが必要
デザイン性端末にある範囲で指定する選べる書体の幅が広がる
管理方法CSSのfont-familyで端末内フォントを指定linkで読み込み、font-familyで適用

Webフォントは、サイトの雰囲気づくりに役立ちます。ただし、読み込みが必要になるため、使うフォントや太さを絞り、必要な範囲に適用することも大切です。

Webフォントを使うときの実践的なポイント

Webフォントを使うときは、デザインだけでなく、表示速度や読みやすさも意識しましょう。

ポイント内容
必要なフォントに絞る多くのフォントを読み込みすぎない
太さを選びすぎない使うfont-weightを絞ると読み込み量を抑えやすい
本文の読みやすさを確認する長文でも疲れにくいかを見る
フォールバックを指定するWebフォントが使えない場合に備える
見出しと本文で役割を分ける見出しは印象、本文は読みやすさを重視する

特に日本語のWebフォントは、文字数が多いため重くなりやすい場合があります。サイト全体の雰囲気を整えたい場合でも、最初は1種類のフォントから導入すると管理しやすくなります。

Google Fontsを利用するときの確認ポイント

Google Fontsを使ってWebフォントを導入したら、次の点を確認しましょう。

確認することチェック内容
linkタグをhead内に貼っているかフォント読み込み用のコードが正しい場所にあるか
font-familyを指定しているか読み込んだフォントを実際に適用しているか
フォント名が一致しているかGoogle Fontsで取得した名前とCSSの名前が合っているか
代替フォントがあるかsans-serifなどを指定しているか
表示が重くないか不要なフォントや太さを読み込みすぎていないか
日本語表示を確認したか日本語の文章でも読みやすいか

Webフォントは、コードを貼り付けたあとにブラウザで確認することが大切です。見た目が変わらない場合は、linkタグが正しく入っているか、font-familyのフォント名が正しいか、class名が一致しているかを確認しましょう。

Webフォントで文字デザインを整える考え方

Webフォントを使うと、Webサイトの文字デザインをより細かく整えられます。端末の標準フォントだけに頼る場合と比べて、制作者が意図した雰囲気を表現しやすくなります。

ただし、フォントは見た目を飾るだけのものではありません。本文では読みやすさ、見出しでは印象、ボタンやメニューでは視認性が大切です。どの部分にどのフォントを使うかを考えることで、ページ全体の完成度が上がります。

Google Fontsを使う場合は、head内にlinkタグを入れてフォントを読み込み、CSSのfont-familyで適用します。ページ全体に使うならbodyへ、特定の文章だけに使うならclassへ指定します。フォントが読み込めない場合に備えて、sans-serifなどのフォールバックも一緒に指定しておくと安心です。

Webフォントを上手に使えるようになると、Webサイトの印象を大きく変えられます。まずはNoto Sans JPのような読みやすい日本語フォントから試し、見出し、本文、メニューなどに適用しながら、文字デザインの違いを確認してみましょう。