Google Fonts

theme-component
,
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 theme-creator.discourse.org
: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

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 overall font size.

Screen Shot 2020-03-09 at 1.16.56 PM
Screen Shot 2020-03-09 at 1.16.56 PM1538Ɨ972 85.9 KB

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/.

46 Likes
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 Likes
6

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

1 Like
7

Thank you. I love it. :grin:

3 Likes
8

Should this work with published pages or does it need to be updated for the new feature? Itā€™s showing as the correct font-family, but itā€™s not displaying the font on published pages. Thanks!

9

Thanks :heart: I really love it.

10

Hey Kris, in the latest build the body font has stopped working.

1 Like
11

I just made a small update that should fix it.

We have a theme selection step that was just added to the site setup wizard a couple days ago, and this changed how fonts were applied in Discourse generally, so I had to make the component-added style more specific.

2 Likes
12

That did it, thanks Kris!

1 Like
13

image

Look like we using v1 api:

https://fonts.googleapis.com/css?family

1 Like
21

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.

1 Like
22

Iā€™m seeing default fonts as well, but on the

https://yoursite.org/u/activate-account/... activate account page

23

I tried and this is indeed an issue.

The published page tries to load the google font through the theme component:

image

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.

1 Like
24

To be honest ever since this discovery I define my fonts in custom CSS. Works great.

2 Likes
25

I am seeing the default fonts but on a 404 page. A minor issue, but just figured it was worth mentioning.

1 Like
26

Does this still work? No matter what font I try my forum is using same all the time. And Iā€™m totally sure there isnā€™t any typos.

Or is iPad the issue now?

27

I canā€™t test on iPad, but it does work for me on Windows / Desktop.

Did you fill in other settings such as body font, etc.?

28

Yes I did.

After asking few users it looks like Google fonts works on desktops but not on mobiles ā€” that is not totally sure yet, though.

Edit.

Boringā€¦ :joy:

It depends on theme. But it looks like there is still questionmarks about device and/or browser.

1 Like
29

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.