Webフォントを使いこなす！font-familyと@font-faceの詳細解説

2024-04-02

CSSで同じフォントの複数のフォントファイルを指定する方法

方法

CSSで複数のフォントファイルを指定する方法は2つあります。

font-family プロパティで複数のフォント名をカンマ区切りで指定します。

.sample {
  font-family: "Noto Sans Japanese", "游ゴシック", sans-serif;
}

この例では、Noto Sans Japanese フォントが利用できない場合は 游ゴシック フォントが、どちらも利用できない場合はブラウザのデフォルトフォントが適用されます。

@font-face ルールを使って、各フォントファイルの詳細情報を個別に指定します。

@font-face {
  font-family: "Noto Sans Japanese";
  src: url("NotoSansJapanese-Regular.woff2") format("woff2"),
       url("NotoSansJapanese-Regular.woff") format("woff");
}

@font-face {
  font-family: "游ゴシック";
  src: url("YuGothic-Regular.woff2") format("woff2"),
       url("YuGothic-Regular.woff") format("woff");
}

.sample {
  font-family: "Noto Sans Japanese", "游ゴシック";
}

この例では、Noto Sans Japanese と 游ゴシック フォントそれぞれについて、woff2とwoff形式のファイルを用意し、@font-face ルールで詳細情報を指定しています。

ポイント

複数のフォントファイルを指定する際は、フォントファミリー名の前に必ず二重引用符を付ける。
ファイル形式は、woff2、woff、ttfなど、ブラウザでサポートされているものを指定する。
@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>
  <p class="sample">これはサンプルです</p>
</body>
</html>

@font-face {
  font-family: "Noto Sans Japanese";
  src: url("NotoSansJapanese-Regular.woff2") format("woff2"),
       url("NotoSansJapanese-Regular.woff") format("woff");
}

@font-face {
  font-family: "游ゴシック";
  src: url("YuGothic-Regular.woff2") format("woff2"),
       url("YuGothic-Regular.woff") format("woff");
}

.sample {
  font-family: "Noto Sans Japanese", "游ゴシック";
}

補足

上記コードはサンプルです。実際の使用には、使用するフォントに合わせてファイル名やパスを変更する必要があります。
フォントファイルは、Webフォントサービスからダウンロードしたり、自分で作成したりすることができます。

CSSで同じフォントの複数のフォントファイルを指定するその他の方法

font-weight プロパティを使って、異なる太さのフォントファイルを指定することができます。

@font-face {
  font-family: "Noto Sans Japanese";
  src: url("NotoSansJapanese-Regular.woff2") format("woff2"),
       url("NotoSansJapanese-Regular.woff") format("woff");
}

@font-face {
  font-family: "Noto Sans Japanese";
  font-weight: bold;
  src: url("NotoSansJapanese-Bold.woff2") format("woff2"),
       url("NotoSansJapanese-Bold.woff") format("woff");
}

.sample {
  font-family: "Noto Sans Japanese";
}

.sample-bold {
  font-weight: bold;
}

@font-face {
  font-family: "Noto Sans Japanese";
  src: url("NotoSansJapanese-Regular.woff2") format("woff2"),
       url("NotoSansJapanese-Regular.woff") format("woff");
}

@font-face {
  font-family: "Noto Sans Japanese";
  font-style: italic;
  src: url("NotoSansJapanese-Italic.woff2") format("woff2"),
       url("NotoSansJapanese-Italic.woff") format("woff");
}

.sample {
  font-family: "Noto Sans Japanese";
}

.sample-italic {
  font-style: italic;
}