| | | |
| --- | --- | --- |
| :discourse2: | **Summary** | **Google Fonts** is a simple theme component that allows you to add a font from [Google Fonts](https://fonts.google.com/) without writing any CSS. |
| š | **Preview** | [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/google-fonts) |
| š | **Repository Link** | [https://github.com/discourse/discourse-google-font-component](https://github.com/discourse/discourse-google-font-component) |
| š | **New to Discourse Themes?** | [Beginnerās guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |
Install this theme component
> [@](#):
>
> :discourse2: As this is an #official theme component maintained by the Discourse team, #Support, #Contribute > Bug, #Contribute > UX, and #Contribute > Feature requests can be made in the respective categories here on Meta, and tagged with the appropriate theme component tag. Click on a link below to get one started. š
>
> [ā **Support**](https://meta.discourse.org/new-topic?category_id=6&tags=google-fonts "Ask for support on configuring and using Google Fonts") [š **Bug**](https://meta.discourse.org/new-topic?category_id=1&tags=google-fonts "A bug report means something is broken, preventing normal/typical use of the theme component") [š **UX**](https://meta.discourse.org/new-topic?category_id=9&tags=google-fonts "Discussion about the user interface of Google Fonts, and how features are presented (including language and UI elements)") [š” **Feature**](https://meta.discourse.org/new-topic?category_id=2&tags=google-fonts "Discussion about how existing Google Fonts features can be improved or enhanced, and how proposed new features could work")
### 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 ``. 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](https://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 document**
> >
> > Perform check on document:
---
I just discovered that this component does not work for /pub/ (published) pages. The fonts are not loading on these pages resulting in a default Times New Roman alike font.
---
I tried and this is indeed an issue.
The published page tries to load the google font through the theme component:
The font file not being loaded on the published page, it doesnāt fall back to the font-family variable `Arial, sans-serif and uses Times New Roman instead.
There may be room for improvement here as long as the published pages can access the modifications required.
---
Thatās awesome, thank you and your team for developing such a convenient feature ^^. I will recommend it to people I know who are using discourse to build user communities.
---
Quick bug report: I just noticed when I set the font weight then bold text doesnāt show up as bold.
I tested this with the fonts `Work Sans` and `Zilla Slab`. I changed the font weight from the default (400) to 300. When I did this bold text did not appear bold. Reset that setting and the bold text reappears.
I set it to 400 and called it a day, but wanted to let you know.
Thanks for your work on this!
---
Any way to get into the nitty gritty a little more? The āHeadlineā font is coming up as 900 weight by default with Headers inside of Topics. Would be great to set the defaults for each of those Markdown objects.
---
There seems to be a bug with this, at least on my forum, if I add the font āInterā with this component then the following happens:
- Start editing or composing a message
- Switch apps to something else while composer is open
- Come back, and the zoom is all wrong, like itās too far zoomed in
- There will also be bugs with Chat and with scrolling now
Not sure if it happens with other fonts, but it happens 100% of the time if I add this component to any theme.
Is this a known bug? Is there a fix?
Thanks
---
Which version of Discourse? Am on 3.3 stable and donāt see Inter. Having the same problems as some of the users here with this component.
I am on 3.3 and want to use Inter. While the font loads, BOLD text isnāt bold.
---
Iāve just merged a refactor of this component that better aligns with Google Font updates ā this should fix some issues people were having with different weights not appearing.
Note that the setting formatting changed slightly so that weights can no longer be included in the font name setting like `Roboto:300,300i,500`, and this would have to be updated to a simple `Roboto`ā¦ but it should migrate automatically on update.