FontStream

ウェブフォントの利用方法

cssファイルに読み込んだウェブフォントを、実際に適用する

cssコードをcssファイル内にペーストした後は、css内でデバイスフォントと同じようにウェブフォントを使用できるようになります。

@font-face{ 〜 }の間が、1つのフォントの指定になります。同じ種類のフォントでも、ウェイト毎に別々のフォントとして扱われます。

font-familyスタイルにウェブフォントを適用するには、cssコードの中に設定されている「font-family名」を使用します。

例:ウェブフォントコードの「font−family名」指定
@font-face{
    font-family: “Ruika-03"; 
    ※ここで設定した名前をウェブフォントの「font−family名」として使用します。
    font-weight: normal;
    url:…
}
例:サイトのページ全体にウェブフォントを適用する
html,body {
    font-family: Ruika-03;
    font-weight:normal;
}

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

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種類書く必要はありません。

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

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

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

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

このような場合でも、cssコードを少し変更することで、同じ種類のフォントのウェイトをfont-weightプロパティでコントロール可能になります。

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

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

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

例:Ruikaのウェイト違いを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;
}
例:Ruikaのウェイト違いを3つ設定したい場合 変更後
@font-face{
    font-family: "Ruika";
    font-weight: 400;
    src:…
}
@font-face{
    font-family: "Ruika";
    font-weight: 700;
    src:…
}
@font-face{
    font-family: "Ruika";
    font-weight: 100;
    src:…
}

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

かなフォントの使い方

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

例:見出し(h1)に「えれがんと」と「ルイカ」を組みわせて使う
@font-face{
    font-family: "Elegant-07";
    font-weight: normal;
    src:…
}
@font-face{
    font-family: "Ruika-04";
    font-weight: normal;
    src:…
}

h1 {
    font-family:"Elegant-07","Ruika-04";
}

えれがんとRuikaの場合は、以下の組み合わせがおすすめです。

  • えれがんと03とRuika02えれがんと03とRuika02
  • えれがんと05とRuika03えれがんと05とRuika03
  • えれがんと07とRuika04えれがんと07とRuika04
  • えれがんと09とRuika05えれがんと09とRuika05
例:見出し(h1)に「えれがんと」と「喜楽」を組みわせて使う
@font-face{
    font-family: "Elegant";
    font-weight: 700;
    src:(えれがんと07のurl)
}
@font-face{
    font-family: "Kiraku";
    font-weight: 700;
    src:(喜楽Bのurl)
}

h1 {
    font-family:"Elegant","Kiraku";
    font-weight:700;
}

えれがんと喜楽の場合は、以下の組み合わせがおすすめです。

  • えれがんと03と喜楽Lえれがんと03と喜楽L
  • えれがんと05と喜楽Mえれがんと05と喜楽M
  • えれがんと07と喜楽Bえれがんと07と喜楽B