FontStream

ご利用案内|基本的な使い方

step.1URLを登録する

  • ログインし、[マイページ]を開きます。
  • [フォント使用サイトURL登録]にウェブフォントを使うサイトのURLを入力します。
    ユーザー登録がまだの方はこちらから登録をお願いします。
  • [登録]をクリックします。

トップページなど、ウェブフォントを使うページの中で一番上の階層のURLをご登録ください。登録したURL以下、すべてのページでウェブフォントをお使いいただけます。

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

step.2CSSコードをコピー

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

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

step.3スタイルシートを編集

  • ご自身のウェブサイト・ブログのスタイルシート(CSS)を開きます。
  • [step.2]でコピーしたウェブフォントのCSSコードをペーストします。
  • ウェブフォントを表示する箇所に、ペーストしたCSSコードのfont-familyを指定します。
ペーストするCSSコードについて
@font-face{
  font-family: "font-family名";
  font-weight: normal;
  src:…
}

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

font−family名、font-weightは自由に変更することができます。

「src:」から下を変更するとウェブフォントが表示できなくなります。書き変わってしまったときはCSSコードを再発行してください。

CSS記述例:本文(html,body)に「ルイカ-03」を使うとき
@font-face{
  font-family: "Ruika-03";
  font-weight: normal;
  src:…
}

html,body {
  font-family: Ruika-03;
  font-weight:normal;
}
CSS記述例:見出し(h2)に「ルイカ-06」、本文(html,body)に「アニト-L」を使うとき
@font-face{
  font-family: "Anito-L";
  font-weight: normal;
  src:…
}

@font-face{
  font-family: "Ruika-06";
  font-weight: normal;
  src:…
}

html,body {
  font-family: Anito-L;
  font-weight:normal;
}

h2 {
  font-family: Ruika-06;
  font-weight:normal;
}

スタイルシートを編集できないブログでのウェブフォントの使い方は[ブログでの使い方]の[記事にstyleを追加]をご覧ください。