サイトのデフォルトフォントを変更する

[Discourse]

このガイドでは、特定の要素のフォントを変更する方法、またはGoogle Fonts以外のフォントライブラリを使用する方法について説明します。

必要なユーザーレベル：管理者

このガイドは、Google Fonts以外のフォントライブラリとの統合を希望する場合、またはサイトの一部の要素のフォントのみを変更したい場合にのみ必要です。Google Fontsを使用しており、サイト全体でフォントをグローバルに変更したい場合は、代わりにこちらのテーマコンポーネントをお試しください：Google Fonts。

このガイドでは、以下の内容を扱います。

• ビルトインのフォント設定の使用
• カスタムフォントでサイトのフォントを変更する
• 特定の要素に異なるフォントを適用する

ビルトインのフォント設定

Discourseには、バンドルされたフォントのセレクションを備えたビルトインのフォントピッカーが含まれています。これは、カスタムCSSなしでサイトのフォントを変更する最も簡単な方法です。

フォント設定ページにアクセスするには、Admin > Appearance > Fontsに移動します。ここから以下を設定できます。

• 基本フォント — サイト上のほとんどのテキストに使用されます（デフォルト：Inter）
• 見出しフォント — 見出しに使用されます（デフォルト：Inter）
• デフォルトのテキストサイズ — すべてのユーザーのデフォルトのテキストサイズ

これらの設定は、内部的には--font-familyおよび--heading-font-familyというCSSカスタムプロパティを使用しており、テーマもこれをオーバーライドできます。

カスタムフォントでフォントを変更する

ビルトインリストに含まれていないフォント（例：Google Fontsや自己ホストされたフォントファイルからのフォント）を使用したい場合は、テーマコンポーネントを介して行うことができます。

1. 新しいテーマコンポーネントを作成する

   Admin > Appearance > Themes & Components > Install > Create Newに移動します。「Component」を選択し、名前を付けます。

2. CSS/HTMLの編集

   「Edit CSS/HTML」ボタンをクリックします。

   

3. Google Fontsを使用してフォントを追加する

   Googleウェブフォントを使用したい場合は、Common > CSSタブに以下を追加します。

   @import url(https://fonts.googleapis.com/css?family=Oswald);
   
   html {
       --font-family: 'Oswald', sans-serif;
       --heading-font-family: 'Oswald', sans-serif;
   }
   

   @import urlの行がスタイルシートの先頭に配置されていることを確認してください。

   この例では、Oswaldがフォントの名前です。

   @import urlメソッドに問題がある場合は、テーマコンポーネントのCommon > /headタブに適切な行を挿入することで、代わりに<link>メソッドを使用することもできます。

   <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
   

   このメソッドはサイトのフォントをグローバルに変更します。

4. 特定の要素にフォントを適用する
   サイトのフォントを一部の要素にのみ変更することもできます。

   ナビゲーションバーやトピックタイトルなど、ごく一部の要素のフォントを変更するには、以下を追加します。

   @import url('https://fonts.googleapis.com/css?family=Oswald:200,300');
   
   .navigation-container, .link-top-line {
       font-family: 'Oswald', sans-serif;
   }
   

   

   あるいは、特定のカテゴリのフォントを変更するには、以下を使用します。

   body.category-CATEGORY-NAME {
       font-family: 'YOUR-NEW-FONT';
   }
   

5. 新しいコンポーネントをメインテーマに追加する

   新しく作成したテーマコンポーネントが、ユーザーが選択できるすべてのメインテーマに追加されていることを確認してください。