ご利用案内|基本的な使い方
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を追加]をご覧ください。