FontStream

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

Aウェブフォントを使用するサイトURLを登録する

サイトのURLを登録には、ユーザー登録が必要です。

※ ユーザー登録がまだの方は新規登録フォームから登録してください。

  • ログインし、[マイページ]を開きます。
  • [フォント使用サイトURL登録]にウェブフォントを使うサイトのURLを入力します。
  • [登録]をクリックします。
    [登録済みサイトURL]に登録したURLが表示されれば完了です。

登録したURL以下、すべてのページでウェブフォントをお使いいただけます。

例:「http://example.jp」でURL登録をしたとき
「http://example.jp/info」 ○ 使用可
「http://example.jp/contents/text」 ○ 使用可
「http://example.com」 × 使用不可
「http://123.example.jp」 × 使用不可

B使用するフォントを選び、cssコードを発行する

  • ログインした状態で、[フォント一覧]を開きます。
  • 使用するフォントを選び、[このフォントを使う]をクリックします。
  • 必要事項を選択し[cssコード発行]ボタンをクリックします。
  • cssコードが表示されたら[cssをコピー]をクリックします。

複数のURLを登録している場合、同じフォントでもURLごとにそれぞれcssコードの発行が必要です。

Cサイトにウェブフォントを呼び出す準備

  • ウェブフォントを使うサイトのcssファイルを開きます。
  • [B]でコピーしたcssコードを貼り付けます。
  • cssファイルを保存します。

これでデバイスフォントと同じようにウェブフォントを使用できるようになります。

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

cssコードの例
@font-face{
    font-family: "font-family名";
    ※ font−family名は自由に書き換えることができます。
    font-weight: normal;
    src:…
    ※ ここから下は編集しないでください。書き換わってしまった場合はcssコードを再発行してください。
}

Dウェブフォントを使う箇所を指定する

  • 貼り付けたcssコードの中の「font-family名」を使って、ウェブフォントを使う箇所にfont-familyスタイルを適用します。
  • cssファイルを保存します。
  • ウェブフォントが表示できているかを確認してください。
例:サイトのページ全体でウェブフォントを使うとき
html,body {
    font-family: Ruika-03;
    font-weight:normal;
}
例:見出し(h1)にのみウェブフォントを使うとき
h1 {
    font-family: Ruika-03;
    font-weight:normal;
}

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

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]かなフォントの使い方

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

例:見出し(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";
}

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

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

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

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相当です。

例:Ruikaのウェイト違いを3つ設定したい場合 変更前
@font-face{
    font-family: "Ruika-04";
    font-weight: normal;
    src: [Ruika-04のurl]
}
@font-face{
    font-family: "Ruika-07";
    font-weight: normal;
    src: [Ruika-07のurl]
}
@font-face{
    font-family: "Ruika-01";
    font-weight: normal;
    src: [Ruika-01のurl]
}

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: [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;
}