Edit paragraphs font weight?

Develop, Build & Integrate CMS Development
1

Hello everyone,

I’m trying to edit the font weight of paragraph text on my website. But I’m noticing that:

1) Through the Typography tab of the Theme Editor I can only change the font weight of headers (through the dropdown that now says “bold” or “regular”)

37347iBA07D4C4C30B7A62.png
37347iBA07D4C4C30B7A62.png149×400 34.1 KB

2) By selecting a paragraph in the editor, going on the top toolbar on Advanced > Source code, and trying to edit the font-weight property I noticed that any value higher than 500 will make my font thicker, but anything below 500 won’t change anything.

37348i26E7BBFCE824FB38.png

My goal is to make the font thinner so here’s my problem. How can I achieve that?
Thank you in advance!

2

If making the font-weight less than 500 won’t work it’s because you don’t have that font weight available; as you mentioned, you only have access to Regular (400 or 500 font weight) and Bold (700 weight usually). You can get Roboto Slab for free from Google fonts so if you add this to your website <head>

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;700&display=swap" rel="stylesheet">

and then you can add this CSS to your global css file that will change all the text on your whole website. Then you can add specific rules for headers etc.

body {
 font-family: 'Roboto Slab', Arial, sans-serif;
 font-weight: 400;
 line-height: 1.33;
 color: #000;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}
3

Thank you very much for your answer.
I understand, but being Google Fonts integrated with Hubspot why wouldn’t I have lighter font weights available? Here on Theme Settings > Typography I can change all the font weights I want, including Light, Extra-Light and Thin (which are the ones I’d like to use).

37368i67506AACD291756D.png
37368i67506AACD291756D.png256×399 37.8 KB

The only problem is that it allows me to change them only for headers. Isn’t there a way to do the same thing for paragraphs without having to change the code?
It can get pretty painful if I want to test 10 fonts and I have to do this every time.

4

Hmm… and if you’re testing lots of fonts, writing it in CSS woule be a hassle too.

If you go in to a page to edit, then click Design tab on the left, then Edit theme settings, then Fonts. What options do you get?

37369iC450FC1E13E2E14B.png
37369iC450FC1E13E2E14B.png385×400 35.8 KB

37370i20F2D566E68BF5D3.png
37370i20F2D566E68BF5D3.png317×399 26.1 KB

5

I have Global Fonts rather than Fonts, and no option to change the weight. Note that my theme is custom.

37375iFA715A7562AE78CC.png
37375iFA715A7562AE78CC.png171×399 21.4 KB

6

Hey @FPC,

have you looked into your fields.json file of your custom theme?

Your font-settings should be located in the “global fonts” area
Look for “primary font” / “secondary font”. Since it’s a custom theme look for

"visibility" : {
 "hidden_subfields" : {
 ...
 "variant" : true,
 ...
 }
 }

You can either delete

"variant" : true,

or set it to false.

After that you should be able to set the font-weight in the theme settings.

Here’s the full documentation about the font-settings

best,

Anton

(Thanks @piersg for linking)

7

Thank you very much. That solved the problem.

In my case the parameter to change was:

 "hidden_subfields" : {
 ...
 "styles" : true
 }

Set it to false and fixed the issue.
Thanks again!

8

Ok, let me ask someone who knows more about Themes. @Anton can you help here?