Google Fonts

テーマコンポーネント
,
1
:discourse2: Summary Google Fonts is a simple theme component that allows you to add a font from Google Fonts without writing any CSS.
:eyeglasses: Preview Preview on Discourse Theme Creator
:hammer_and_wrench: Repository Link https://github.com/discourse/discourse-google-font-component
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

Features

This component allows you to set the main site font, and optionally separate fonts for headlines and monospaced text (code blocks). You can also choose a font weight in each case, and increase the font size.

Behind the scenes this sets up a little bit of CSS along with Google’s font <link>. Note that this is relying on Google to serve the font files from https://fonts.googleapis.com/.

Settings

Name Description
fonts Add the name of the font(s) you want to use from fonts.google.com. Note that font names are CaSe SeNsiTivE!
body font The main font used throughout Discourse, must be included in “fonts” setting above
body font weight Font thickness in the range of 100-900. 400 is normal, 700 is bold
headline font Optional font for headlines, must be included in “fonts” setting above
headline font weight Font thickness in the range of 100-900. 400 is normal, 700 is bold
monospaced font Optional font for code blocks, must be included in “fonts” setting above.
monospaced font weight Font thickness in the range of 100-900. 400 is normal, 700 is bold
normal font size Default font size for all users, adjusting this will adjust all font sizes proportionately
smaller font size Selectable in each user’s interface preferences
larger font size Selectable in each user’s interface preferences
largest font size Selectable in each user’s interface preferences

:discourse2: Hosted by us? Theme components are available to use on our Standard, Business, and Enterprise plans.

Last edited by @awesomerobot 2025-03-14T15:46:34Z

Check documentPerform check on document:
「いいね！」 50
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

Thanks :heart: I really love it.

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