Google 字体

主题组件
,
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/（已发布）页面。这些页面上的字体未加载，导致显示默认的新罗马字体。

1 个赞
22

我也看到了默认字体，但在 https://yoursite.org/u/activate-account/... 激活账户页面上

23

我试过了，这确实是个问题。

已发布的页面尝试通过主题组件加载谷歌字体：

image

字体文件未在已发布的页面上加载，它不会回退到字体系列变量 Arial, sans-serif，而是使用 Times New Roman。

只要已发布的页面能够访问所需的修改，这里可能还有改进的空间。

1 个赞
24

老实说，自从有了这个发现以来，我一直在自定义 CSS 中定义我的字体。效果很好。

2 个赞
29

太棒了，感谢您和您的团队开发了如此便捷的功能^^。我会向我认识的、使用 discourse 构建用户社区的人推荐它。

33

快速 Bug 报告：我刚注意到当我设置字体粗细时，粗体文本没有显示为粗体。

我在字体 Work Sans 和 Zilla Slab 上测试了这一点。我将字体粗细从默认值（400）更改为 300。当我这样做时，粗体文本没有显示为粗体。重置该设置后，粗体文本会重新出现。

我将其设置为 400，然后结束了，但想告知您。

感谢您在这方面所做的工作！

34

能否更深入地探讨一下？“Headline”字体在 Topics 中的 Headers 默认显示为 900 字重。如果能为每个 Markdown 对象设置默认值就太好了。

1 个赞
36

这似乎存在一个 bug，至少在我的论坛上是这样，如果我添加字体“Inter”和此组件，就会发生以下情况：

  • 开始编辑或撰写消息
  • 在撰写器打开的情况下切换到其他应用
  • 返回后，缩放会完全错误，就像放得太大了
  • 现在聊天和滚动也会出现 bug

不确定是否会与其他字体发生这种情况，但如果我将此组件添加到任何主题中，它会 100% 发生。

这是一个已知的 bug 吗？有修复方法吗？

谢谢。

2 个赞
37

如果您想要更改 基础字体 和 标题字体，我们已经内置了 Inter 字体，在管理员  网站设置中，无需其他组件。

2 个赞
38

哪个版本的 Discourse？我使用的是 3.3 稳定版，但没有看到 Inter。我在这里遇到了一些用户关于此组件的相同问题。

我使用的是 3.3 版本，想使用 Inter。虽然字体已加载，但粗体文本并非粗体。

39

您需要更新到 3.4 版本才能使用内置的 Inter 选项。

2 个赞
40

我刚刚合并了此组件的重构，以更好地适应 Google 字体更新——这应该可以解决人们在使用不同字重时遇到的问题。

请注意，设置格式已略有更改，因此字重不能再包含在字体名称设置中，例如 Roboto:300,300i,500，而应更新为简单的 Roboto……但它应该会在更新时自动迁移。

2 个赞