Google Fonts

Theme component
,
30

I’ve just followed the various instructions on changing the fonts on my forum: these are the steps I followed. I’m hoping this is a good place to ask for help.

Admin → Customize → Themes

Install button

Choose: “From a git repository”

Enter: GitHub - discourse/discourse-google-font-component
(it installed fine and gave me a nice Discourse form to fill out, which I did with the fonts I’m interested in trying out)

Preview → this is where it stopped working – all I get is my site using the default Arial, no sign of the fonts I want to see.

I’ve entered font names that I know are present in the fonts.google.com site, I just went through a whole bunch to pick the five candidates. But perhaps I’m not using the right format? I entered them thus: “Libre Caslan Text” “Gentium Plus” “Oranienbaum” without any of the other font specifiers.

This is a screen shot showing what I entered, at the top of the form:

1st-try--enter-fonts-settings
1st-try--enter-fonts-settings989×811 62.9 KB

What do I need to do differently?

1 Like
31

Hmm these same settings are working for me, so I’m not sure what the problem is…

The image shows a "Theme Settings" interface with options for customizing fonts, highlighting a feature where overridden settings are indicated with a dot and a highlighted color, along with instructions on how to add fonts from Google Fonts. (Captioned by AI)
The image shows a "Theme Settings" interface with options for customizing fonts, highlighting a feature where overridden settings are indicated with a dot and a highlighted color, along with instructions on how to add fonts from Google Fonts. (Captioned by AI)651×634 42.7 KB

(I’ve got the theme component enabled, so you can see that the theme setting text is rendered using Libre Caslon)

If you right click the page, select “inspect” and then “console” — are there any errors listed?

1 Like
32

Ah, I finally checked back, and tried your suggestion: preview, Inspect, Console. This is the error message I see:

The resource from “https://fonts.googleapis.com/css?family=&display=swap” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

I have no idea what to do about this. Any suggestions?

33

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!

34

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.

1 Like
35

looks like you need to click all the green checkboxes to finish setting them up. changing theme component settings is a two step part - set the option then click the green checkmark. Once settings are established, it will look like Kris’s (awesomerobot) screenshot (without any green checkboxes). :slight_smile: