Google Fonts theme component

This is a simple theme component that allows you to add a font from Google Fonts without writing any CSS.

:hammer_and_wrench: Github repo: https://github.com/discourse/discourse-google-font-component

:eyes: Preview on Theme Creator

:question: How do I install a Theme or 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.

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

36 Likes

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

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

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

1 Like

Thank you. I love it. :grin:

3 Likes

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!

Thanks :heart: I really love it.

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

1 Like

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

That did it, thanks Kris!

1 Like

image

Look like we using v1 api:

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

Note: Once you entered your font into Body & Head either refresh your page or enable and disable as it gives completely different font.

Update on latest post - recently, there’s been an issue as every time there’s an error or something isn’t available it goes back to Lora I believe but not sure. (Same font as in video I published before)