ブログでウェブフォントを使う

ブログでFontStreamのウェブフォントを使う方法の一部をご紹介します。ブログに関する詳しいお問い合わせや、最新の機能・画面については各サービス運営者にご確認ください。

基本的なウェブフォントの使い方は[基本的な使い方]をご覧ください。

大きく分けて2種類の方法があります。

• スタイルシートを編集
• 記事にstyleを追加

FontStreamが使えるブログ（2020年6月現在）

[スタイルシート編集]の○をクリックすると、スタイルシートへの行き方の説明画面へ移動します。

スタイルシートを編集

ブログデザイン・テンプレートのスタイルシート（CSS）にウェブフォントの指定を追加すれば、使いたい場所に一括でウェブフォントを表示させれられるので効率的です。

• 使用中のブログテンプレートのスタイルシート編集画面を開きます。
• FontStreamでコピーしたウェブフォントのCSSコードをペーストします。
• ウェブフォントを使う箇所を指定します。
  指定の例は[基本的な使い方]をご覧ください。

• 編集前にスタイルシートのバックアップをとってから作業することをおすすめいたします。
• スタイルシート内ですでにフォント指定がされている時は、スタイルシートの末尾にウェブフォントの指定を記載すると、既存の指定を上書きして表示することができます。ただしテンプレートによってはレイアウトが崩れる可能性がありますのでご注意ください。
• お使いのブログサービスや、デザイン・テンプレートによってはスタイルシート編集ができないことがあります。その場合は記事にstyleを追加する方法をお試しください。

記事にstyleを追加

記事にstyleを適用することでもウェブフォントを表示できます。スタイルシート編集ができないブログデザインをお使いの場合や、スタイルシート編集するのが不安な方はこの方法をお試しください。

• 記事編集ページを開き、HTML入力モードに切り替えます。
• styleタグを入力します。
• styleタグの中にFontStreamでコピーしたウェブフォントのCSSコードをペーストし、font-familyプロパティーを指定します。
  指定の例は[基本的な使い方]をご覧ください。

例：FC2ブログの記事編集ページ

• 本文はstyleタグの外に入力してください。
• ブログテンプレートによっては、ひとつの記事にstyleを指定するだけですべてのページでウェブフォントが表示できることもあります。
• Amebaブログでは、記事本文でのhtml、bodyタグの使用が禁止されています（2020年6月現在）。他の使用可能タグ（pやh2）などを使用してください。
• サービスによってはstyleタグの使用が禁止されていることがあります。その場合はスタイルシートを編集方法をお試しください。