Webフォントサービス、@font-face、システムフォント…Webサイトに非標準フォントを追加する方法を徹底解説

2024-04-05

ウェブサイトに非標準フォントを追加する方法

Webフォントサービスを使う

メリット:

手軽に導入できる
多くのフォントが利用可能
ライセンス管理が不要

ページの読み込み速度が遅くなる場合がある
無料プランでは使えるフォントが制限されている場合がある

Webフォントサービスを使う手順:

サービスサイトで好きなフォントを選ぶ
コードをコピーする
HTMLファイルにコードを貼り付ける

例:

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">

上記は、Google Fontsから「Noto Sans JP」フォントを追加する例です。

@font-face を使う

より多くのフォントフォーマットに対応できる
フォントファイルを自サーバーで管理できる

コード量が多くなる

@font-face を使う手順:

フォントファイルをダウンロードする
フォントファイルをWebサーバーにアップロードする
CSSファイルに以下のコードを記述する

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

body {
  font-family: "MyFont", sans-serif;
}

上記は、「MyFont」というフォントを追加する例です。

システムフォントを使う

ページの読み込み速度が速い
特別な設定が不要

利用できるフォントが限られる
デザインの自由度が低い

システムフォントを使う例:

body {
  font-family: "游ゴシック", sans-serif;
}

ウェブサイトに非標準フォントを追加するには、いくつかの方法があります。それぞれの方法のメリットとデメリットを理解した上で、サイトの状況に合わせて最適な方法を選択してください。

Webフォントサービスを使う

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>サンプルコード</title>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
  <h1>これは見出しです</h1>
  <p>これは本文です</p>
</body>
</html>

ポイント:

<head> タグ内に link 要素を追加する
href 属性には、フォントファイルのURLを指定する
family パラメータには、フォントファミリー名を指定する

@font-face を使う

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>サンプルコード</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>これは見出しです</h1>
  <p>これは本文です</p>
</body>
</html>

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

body {
  font-family: "MyFont", sans-serif;
}

@font-face ルールを使って、フォントファイルの情報を記述する
src プロパティには、フォントファイルのURLとフォーマットを指定する
body セレクタを使って、フォントファミリーを適用する

システムフォントを使う

例: 「游ゴシック」フォントを使用する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>サンプルコード</title>
</head>
<body>
  <h1>これは見出しです</h1>
  <p>これは本文です</p>
</body>
</html>