Hello, I’m trying to make the text on my webshop exactly like it looks on font sites, like on Montserrat - Google Fonts. I added font-family: Montserrat, sans-serif; font-weight: 900; in my collection-hero__title but it does not look the same as in google fonts (see image below). If someone knows why this styling issue is happening please let me know! Thanks in advance 
Webshop URL: Black Friday Jewelry Sale | Exclusive Deals from LIORÉNNA
Topic summary
Font weight/display of the Montserrat heading in a Dawn theme collection hero doesn’t match the Google Fonts preview, despite setting font-family: Montserrat and font-weight: 900. Screenshots and a live URL were shared to show the mismatch.
Proposed causes and fixes:
- Theme font variables: The heading likely isn’t using Montserrat at all. Suggested fix: set the heading font variable to the body font so the collection title uses Montserrat (adjust --font-heading-family for .collection-hero__title via Custom CSS/Theme settings/base.css).
- Missing weights: Dawn may not include the same Montserrat weight files as Google Fonts (e.g., 900). Suggested fix: upload the correct Montserrat font files to the theme and declare them with @font-face in base.css to match Google’s preview weights.
Actions suggested:
- Override heading font to Montserrat via CSS variable.
- Install and declare the required Montserrat weight files to ensure consistent rendering with Google Fonts.
Status: No confirmation from the original poster; resolution pending. Images are central to illustrating the visual discrepancy.
1 Like
Try this code in “Custom CSS”
In Collection Hero section settings, or in “Theme settings”
As you body font is selected to be Montserrat, this will make collection heading this font too.
.collection-hero__title {
--font-heading-family: var(--font-body-family);
}
Contrary to what is said below – it’s not a “different look of Montserrat” – it’s simply not a Montserrat font currently in use.
Hi @TrendBlend
- In your Shopify Admin go to online store > themes > actions > edit code
- Find Asset > base.css and paste this at the bottom of the file:
.collection-hero__title {
--font-heading-family: va(--font-body-family);
}
1 Like
Hi @TrendBlend
Montserrat looks different because Dawn isn’t using the same font weights Google Fonts provides. Upload correct Montserrat fonts files to your theme and declare them with suitable font face rules in base.css. Once the weights files are installed, your titles will look exactly like the Google preview.