I can’t use the css property “font-weight” on my site. Tried with “!important” but it doesnt help. I’m using the font “Inter” which is from my understanding one of Shopifys system fonts. Looking here: https://shopify.dev/docs/themes/architecture/settings/fonts#available-fonts it’s stated it exists of 9 variants.
When using the property font-weight: 100-500 seems to be regular & 600-900 is bold. Im looking to use more variants.
Here’s my theme settings:
How do I solve this?
Each font has its own set of available weights to start with. On top of that, most themes usually load only 1 bold version of them. Why?
Most likely because loading fonts (body, body italic, body bold, heading, heading italic, heading bold etc.) is actually not that negligible in network bandwidth. So loading too many of them can make your website seem slower, especially for new visitors when nothing is cached. I’m not gonna dive too deep into this but this is something that should be considered if you have performance in mind.
To answer your question:
I suppose if you have 3 available bold fonts, it should be more than enough (for instance 400, 600 and 900).
