Google Fonts

カスタマイズ テーマコンポーネント
,
1

| |
|—|—|—|
| :discourse2: | 概要 | Google Fonts は、CSS を一切書かずに Google Fonts からフォントを追加できるシンプルなテーマコンポーネントです。
| :eyeglasses: | プレビュー | Discourse テーマクリエイターでプレビュー |
| :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
How to change font on my site
Anyone embedding fonts successfully?
Allow users to choose font
Air Theme
Minima Theme
Is that possible the override Discourse variables?
After update Discourse, custom font does not apply to cyrillic characters
Font Style Broke after v3.5.0.beta1 +330 update
Change the default font on your site
How to use fonts that are not present in discourse?
Air Theme
Can I simply add directories to my Discourse install?
Customizing your site with existing theme components
Problems with PWA on iOS
4

This Fantastic! Can this be installed Multiple Times to link to different themes by changing it’s Name in Advanced install?

5

I don’t see why not. We’ve installed the same theme twice, for example here on Meta to have both a light and dark version.

「いいね！」 3
6

Thanks. Forgot you can rename it to identify/link it to other themes.

「いいね！」 1
7

Thank you. I love it. :grin:

「いいね！」 3
9

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

21

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

「いいね！」 1
22

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

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

23

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

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

image

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

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

「いいね！」 1
24

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

「いいね！」 2
29

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

33

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

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

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

この作業に感謝します！

34

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

「いいね！」 1
36

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

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

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

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

よろしくお願いします。

「いいね！」 2
37

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

「いいね！」 2
38

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

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

39

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

「いいね！」 2
40

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

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

「いいね！」 2