文字の種類によって複数のウェブフォントを使い分ける

font-familyには複数のフォントを指定することができ、先に指定したフォントが適用できなければ、後に指定したフォントを呼び出す…という決まりになっています。

これを利用して、英語だけを収録したフォントを先に指定し、後から日本語のフォントを指定することで、英数字と日本語に別々のフォントを適用でき、合成フォント風にウェブフォントを使用できます。

また、英数字と日本語だけでなく、ひらがな・カタカナのみ収録したフォントと、漢字を含む日本語のフォントを組み合わせることもできます。

詳しくは[かなフォントの使い方]をご覧ください。

例：font-familyスタイルに複数のウェブフォントを指定する

html,body {
  font-family:helvetica,Ruika,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",YuGothic,"游ゴシック",sans-serif;
}

この指定方法では、まず英数字にhelveticaが適用され、日本語にウェブフォントのRuikaが適用されます。ウェブフォントがなんらかの理由で使用できない場合、それ以降に設定されているフォントのうち、デバイスフォントとしてPC内にインストールされている方が適用されます。

デバイスフォントの指定に日本語名と英字名の2種類書かれているのは、MacとWindowsで有効なfont-family名に違いがあるためです。
ウェブフォントでは、CSSコード内で明示的にfont-family名を決定するため、2種類書く必要はありません。

かなフォントの使い方

font-familyに指定したフォントは先頭から順番に適用されます。これを利用して、別々のかなフォント（漢字の入っていないフォント）と総合書体（漢字の入っているフォント）を組み合わせて使うことができます。

CSS記述例：タイトル（h1）に「はなこ-05」と「えれがんと平成明朝-05」を組み合わせて使う

@font-face{
  font-family: "Hanako-05";
  font-weight: normal;
  src:…
}
@font-face{
  font-family: "ElegantHM-05";
  font-weight: normal;
  src:…
}

h1 {
  font-family:"Hanako-05","ElegantHM-05";
}

かなフォントと総合書体のおすすめの組み合わせは[かなフォントを総合書体と組み合わせて使う]をご覧ください。

複数のウェイトがあるウェブフォントを使う

ウェブフォントでは、同じ種類のフォントでも、ウェイト毎に別々のフォントとして扱われるため、それぞれにフォントファイルの読み込みが必要です。

FontStreamで発行されるCSSコードでも、ウェイト毎に固有のfont-family名が設定された状態になっています。

そのため、cssの中でウェブフォントのウェイトのスタイルを変更したいときは、font-weightプロパティではなくfont-familyプロパティでスタイルを変更する必要があります。

ただし、CSSコードを以下のように変更すれば、同じ種類のフォントのウェイトをfont-weightプロパティで指定することができるようになります。

• CSSコード内の、font-family名の部分を共通の名前で統一します。
• CSSコード内のfont-weightの部分を、100単位の数字に置き換えます。

※ 使用可能な数字は、100単位で100〜900の9つです。

※ 一般的に、font-weightはnormalが400、boldが700相当です。

CSS記述例:ルイカのウェイト違いを3つ設定したいとき【変更前】

@font-face{
  font-family: "Ruika-04";
  font-weight: normal;
  src: …
}
@font-face{
  font-family: "Ruika-07";
  font-weight: normal;
  src: …
}
@font-face{
  font-family: "Ruika-01";
  font-weight: normal;
  src: …
}

html,body {
  font-family: Arial,"Ruika-04","游ゴシック","Yu Gothic",sans-serif;
  font-weight: normal;
}
h1 {
  font-family: Arial, "Ruika-07";
  font-weight: normal;
}
p {
  font-family: Arial, "Ruika-01";
  font-weight: normal;
}

CSS記述例：ルイカのウェイト違いを3つ設定したいとき【変更後】

@font-face{
  font-family: "Ruika";
  font-weight: 400;
  src: …（Ruika-04のurl）
}
@font-face{
  font-family: "Ruika";
  font-weight: 700;
  src: …（Ruika-07のurl）
}
@font-face{
  font-family: "Ruika";
  font-weight: 100;
  src: …（Ruika-01のurl）
}

html,body {
  font-family: Arial,"Ruika","游ゴシック","Yu Gothic",sans-serif;
  font-weight: 400;
}
h1 {
  font-weight: 700;
}
p {
  font-weight: 100;
}