Hi I am using the Sanf-serif system fonts for body text but unfortunately is not having an option to make it less than “Regular” from the customizer. How can I make the texts in this area Lighter/Thinner?
Topic summary
A user wants to reduce the font weight of body text in their Shopify store using the Impulse theme with system sans-serif fonts, but the theme customizer only allows “Regular” weight or heavier.
Initial attempts:
- First suggestion to modify
.rtefont-size was misunderstood; user wanted weight changes, not size - Direct
font-weightCSS modifications in theme.css failed to work - Adjusting the CSS variable
--typeBaseWeightalso produced no visible changes
Root cause identified:
System fonts (Helvetica, Arial, sans-serif) don’t render consistently across devices and may not support lighter weights. The specific font on the user’s system lacked weights below ~550.
Solution:
- Switched from system fonts to Inter (Google font via Shopify)
- User manually uploaded custom Inter font files (.woff2) for weights 300-600
- Added
@font-facedeclarations in theme.css - Critical fix: closed an unclosed
@mediaquery that was preventing CSS from applying on desktop
Additional customizations:
- Adjusted body text and sales-point font sizes separately for mobile vs. desktop using media queries
- Kept product prices at original smaller size
- Final working code provided for
.rteand.sales-pointselements with responsive sizing
The discussion resolved successfully with custom font implementation and responsive typography adjustments.
Hi @Jim3
Please add below css:
.rte {
font-size: 15px !important;
}
It will look like below:
1 Like
No I just ask you to add that css which iI mentioned earlier either in theme.css or custom css
1 Like
Look,I think maybe you are assuming that I know more about coding interface. I don’t know where is theme.css or custom.css. Can you please navigate me?
Also there is misunderstanding. I dont want to change the size of the body text. I want to change the thickness of it. I want to make it thinner/lighter
@Jim3 Ok Got it, Can you please go to Online store → Themes → Edit code and search for theme.css or base.css and add css code at the bottom of the file.
or simply Themes → Customize → Custom CSS
.rte {
font-weight: 300 !important;
}
@Parampreet It’s not working.
Have you added it in theme.css ?
Yes, I tried both ways
I tried to make it even 100 at both places. Does not work !
Can you please share the screenshot where you are adding this?
1 Like
In your file it is in media query that’s why it is not showing just add } before our code
1 Like
Nope.
Go to Customize → Theme Settings → Custom CSS and paste this:
body {
--typeBaseWeight: 200;
}
Setting this CSS variable is better than setting font-weight directly because theme own CSS uses this variable in several places, so you’re not fighting it, but cooperating. 
And avoid editing theme code – it will bite you in the … when you would like to update your theme version.
1 Like
@tim_1 and @Parampreet Guys, look what happened. I added the code @tim_1 gave me and there was not change (look the screenshot) then I decide let me try instead of going down to go up with the weight to see is there going to be some change and look at the screenshots !
So I am using sans-serif and Impulse team. It seams that something in that theme settings or maybe you know better, is stopping us to go below 550 weight or something..
What do we do now? Do you have idea whats going on?
The problem with “System fonts” is that they are not the same on every device.
If you’re using a network font, it’s rendered more or less the same on everywhere.
Also – your font is currently selected as Helvetica, Arial, sans-serif.
So, on my Mac I may have Helvetica, you, on your PC may have Arial, somebody else will fallback to default system sans-serif which can be a different font altogether.
And this is why network fonts were invented in the first place – to provide same experience on all devices.
What you are seeing simply means that your particular font does not have lighter versions. Also keep in mind that most of the fonts do not have continuously variable weight – it’s a fixed set of weights, like “200,400,600,900”
For example, my Mac has 200:
default:
200:
600:
1 Like
@tim_1 Thank you so much, because I am learning new things. So I changed my body text fonts to Inter as I thought is network google font so it will look same basically same anywhere, isn’t it? also it supposed to hold from 100-900 weight. But my product grid headings which supposed to be Inter (Since when I change the type of fonts for body text I see that the headings of the product grid changed style) But now again when I try to go for 500 directly switches to very thin/light (even inter should support it) why? - Otherwise I fixed the description weight issue with Inter and hope on every Max, Windows will looks same.
Also the price went too light now, can we please bold it just a bit with some code? and if possible to try to make the headings at 500 weight too?
