Google フォント

:discourse2: 概要 Google Fonts は、CSS を記述せずに Google Fonts からフォントを追加できるシンプルなテーマコンポーネントです。
:eyeglasses: プレビュー Discourse Theme Creator でのプレビュー
:hammer_and_wrench: リポジトリリンク https://github.com/discourse/discourse-google-font-component
:open_book: Discourse テーマが初めての方へ Discourse テーマの使用に関する初心者ガイド

このテーマコンポーネントをインストール

機能

このコンポーネントを使用すると、サイトのメインフォントを設定し、オプションで見出しや等幅テキスト(コードブロック)用の個別フォントを設定できます。また、それぞれの場合にフォントの太さを指定し、フォントサイズを大きくすることもできます。

裏側では、これにより Google のフォント <link> とともに、いくつかの CSS が設定されます。なお、これは https://fonts.googleapis.com/ からフォントファイルを Google が提供することに依存しています。

設定

名前 説明
fonts fonts.google.com から使用したいフォントの名前を追加します。フォント名は大文字と小文字を区別します!
body font Discourse 全体で使用されるメインフォント。上記の「fonts」設定に含まれている必要があります。
body font weight 100〜900 の範囲のフォントの太さ。400 が標準、700 が太字
headline font 見出し用のオプションのフォント。上記の「fonts」設定に含まれている必要があります。
headline font weight 100〜900 の範囲のフォントの太さ。400 が標準、700 が太字
monospaced font コードブロック用のオプションのフォント。上記の「fonts」設定に含まれている必要があります。
monospaced font weight 100〜900 の範囲のフォントの太さ。400 が標準、700 が太字
normal font size すべてのユーザーのデフォルトのフォントサイズ。これを変更すると、すべてのフォントサイズが比例的に調整されます
smaller font size 各ユーザーのインターフェース設定で選択可能
larger font size 各ユーザーのインターフェース設定で選択可能
largest font size 各ユーザーのインターフェース設定で選択可能

:discourse2: ホスティングサービスをご利用中ですか? テーマコンポーネントは、Standard、Business、Enterprise の各プランでご利用いただけます。

「いいね!」 51

これは素晴らしいですね!高度なインストールで名前を変更することで、異なるテーマにリンクするために複数回インストールすることは可能ですか?

なぜダメだとは思います。例えば、メタサイトでは、ライト版とダーク版の両方を提供するために、同じテーマを二度インストールしました。

「いいね!」 3

ありがとうございます。他のテーマと識別したりリンクしたりするために名前を変更できることを忘れていました。

「いいね!」 1

ありがとうございます。大好きです。:grin:

「いいね!」 3

ありがとうございます♥ 大好きです。

このコンポーネントが /pub/ (公開済み) ページで機能しないことを発見しました。これらのページではフォントが読み込まれず、デフォルトの Times New Roman に似たフォントが表示されます。

「いいね!」 1

デフォルトのフォントも表示されていますが、

https://yoursite.org/u/activate-account/... のアカウント有効化ページで表示されています。

試したところ、これは確かに問題でした。

公開されたページでは、テーマコンポーネントを通じて Google フォントを読み込もうとしています。

image

公開されたページでフォントファイルが読み込まれないため、font-family 変数 Arial, sans-serif にフォールバックせず、代わりに Times New Roman が使用されます。

公開されたページが変更に必要なものにアクセスできる限り、ここには改善の余地があるかもしれません。

「いいね!」 1

正直なところ、この発見以来、カスタムCSSでフォントを定義しています。うまくいっています。

「いいね!」 2

素晴らしいですね。このような便利な機能を開発してくださったあなたとチームに感謝します^^。Discourseを使ってユーザーコミュニティを構築している知人にもお勧めします。

簡単なバグ報告です。フォントの太さを設定すると、太字テキストが太字で表示されないことに気づきました。

Work SansZilla Slab のフォントでこれをテストしました。フォントの太さをデフォルト(400)から300に変更しました。これを実行したところ、太字テキストは太字で表示されませんでした。その設定をリセットすると、太字テキストが再び表示されました。

400に設定して、それで済ませましたが、お知らせしたかったのです。

この作業に感謝します!

もう少し詳しく教えていただけますか? 「見出し」フォントがトピック内のヘッダーでデフォルトで900ウェイトで表示されます。これらのMarkdownオブジェクトのそれぞれにデフォルトを設定できると素晴らしいのですが。

「いいね!」 1

これにはバグがあるようです。少なくとも私のフォーラムでは、このコンポーネントで「Inter」フォントを追加すると、次のようになります。

  • メッセージの編集または作成を開始する
  • コンポーザーが開いた状態で別のアプリに切り替える
  • 戻ると、ズームが非常に不適切になり、ズームインしすぎているように見えます
  • チャットやスクロールにもバグが発生します

他のフォントでも発生するかどうかはわかりませんが、このコンポーネントをテーマに追加すると、常に発生します。

これは既知のバグですか?修正方法はありますか?

よろしくお願いします。

「いいね!」 2

管理者 > サイト設定の下で Base fontHeading font を変更したい場合は、既にInterが組み込まれています。コンポーネントは必要ありません

「いいね!」 2

Discourse のどのバージョンをご利用ですか?私は 3.3 stable を使用していますが、Inter が表示されません。このコンポーネントに関して、他のユーザーと同じ問題を抱えています。

3.3 を使用しており、Inter を使いたいと考えています。フォントは読み込まれますが、太字のテキストが太字になりません。

組み込みのInterオプションを使用するには、3.4に更新する必要があります。

「いいね!」 2

Google Fontsのアップデートに合わせてコンポーネントのリファクタリングをマージしました。これにより、異なるウェイトが表示されないという問題がいくつか解決されるはずです。

設定のフォーマットがわずかに変更され、フォント名設定に Roboto:300,300i,500 のようにウェイトを含めることができなくなりました。これは単純な Roboto に更新する必要がありますが、アップデート時に自動的に移行されるはずです。

「いいね!」 2