Issue: Futura set in Dawn theme ignores light weights; font-weight: 100 has no effect, while 600+ appears bold.
Findings: Shopify’s font setting can list variants, but the theme typically loads only one weight (e.g., Regular) for the selected font handle. The bold at 600+ is a browser-generated “faux bold,” not a true heavier font file.
Proposed solutions: Load the specific font files for the desired weights (e.g., Futura Light) and define them with @font-face, then reference those weights in CSS. Alternatively, add a Google Fonts URL (with required weights) to the theme and update CSS accordingly.
Resources: Shopify docs on adding fonts to themes, plus a more approachable guide (Shopify Partners blog “font picker,” see “Stepping up your font styling”) for creating CSS rules per weight.
Constraints: One participant requested the store URL for diagnosis; the OP cannot share due to NDA.
Status: Guidance and links provided; no confirmed implementation or resolution yet. Screenshots illustrate current CSS and font settings but are not essential to the solution.
Key terms: @font-face = CSS rule to load specific font files/weights; faux bold = browser-simulated bold when real bold/light files aren’t present.
I am currently using this in the latest Dawn theme:
.header__menu-item {
font-size: 25px;
font-family: “Futura”;
font-weight: 100;
}
However the font-weight has no change on the font itself, it still shows the regular weight. If I change font-weight to 600+, then the font becomes bold. So why does it not show as a lighter variant?
you need to look for the google font url add that url to your theme using the required font weight and update in your css code hope your issue will be resolve.
If not get back again.
Thanks
But the font is already available in https://shopify.dev/docs/themes/architecture/settings/fonts
Is it possible to support without the link? Have some NDA there I can’t share right now.
its not possible because without looking into it i cannot give an exact solution. I can only assume that this might be happen , this and this. You can share private.
Thanks
Yes, Shopify library lists multiple font variants, but the font file loaded by theme includes only one weight for the font you’ve selected in theme settings – say you have “Futura, Regular”.
If you need other weights you need to have more font-face rules – font-object defines only a single font-variant (and also reflected in font handle on your screenshot).
https://shopify.dev/docs/themes/architecture/settings/fonts#add-shopify-fonts-to-your-theme
The bold you see when you select 600+ is not a different weight from the same file but a faux bold generated by browser from normal font weight.
I am not an expert at this, is there some tutorial or step by step guide to do so? The link you posted assumes a certain level of expertise to achieve this.
Yes, the link above is a bit formal, here is a bit friendlier one:
https://www.shopify.com/au/partners/blog/font-picker
especially under “Stepping up your font styling” you can see how they handle creating CSS rules for bolder version of the base font.
You should use the same approach for the weight you need.
