Font-weight values on a Shopify Dawn 2.0 site using the Inter font appear limited: 100–500 render as regular and 600–900 as bold, even with !important. The goal is to use more weight variants.
Root cause: Themes typically load only a subset of a font’s weights (often just regular and one bold) to reduce bandwidth and improve performance. If a weight isn’t loaded, multiple values map to the nearest available face.
Proposed solution:
Notes:
Status: Guidance provided with concrete steps; issue appears resolvable by loading the needed font weights.
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).
