css selectors - Monserrat Google Font issue showing different rendered fonts despite same CSS and @import

I am working on a Hubspot website that has two versions of the same custom theme. The theme version 1 (V1) is on the older pages and we are updating the site to version 2 (V2) so the new pages have very similar theme CSS files, templates, modules and content. Updated version 2 has been recently optimized for file sizes and a few other things that should have no impact on this issue I am having.

Original google font we were using was Merriwether. We were loading the 300, 500 and 700 sizes. Same on both v1 and v2 and everything worked great. Rendered pages matched font look and sizes. @import url(':ital,wght@300,500,700&display=swap');

Changed font to Montserrat and now having issues all over. @import url(':ital,wght@300,500,700&display=swap');

I am wondering if it is this font in particular, am I missing something that should be obvious but is buried somewhere in CSS even though under inspect the font CSS is identical for individual elements. For example the H1 line in the hero section. The CSS for H1 is as follows for both V1 and V2. There an no other font family declarations on this element.

.billboard h1 {
box-sizing: border-box;
color: rgb(255, 255, 255);
display: block;
font-family: Montserrat; 
font-size: 20px;
font-weight: 700;
height: 45px;
line-height: 30px;
}

Set V1 and V2 to load using @import and specifically 300, 500, 700. Essentially just changed the font name on the @import. First thing was 300 rendered as 100. 500 as 500 and 700 as 500.

So changed the @import to call all sizes. @import url(':wght@0,100..900;1,100..900&display=swap');

V1 would render 100, 400 and 700 (as 500 still). V2 would now render 100, 300, 400, 500 and 600. But not anything else even though Google Fonts says there should be more font weights.

I am looking at the same element (although all elements are affected) in the same browser, separete tabs of course. Incognito in Chrome on MacOS Ventura 13.7.4. But issue also appears on coworkers new Mac as well. In a Safari window

On V1, in Chrome inspect -> Element -> Computed Tab it says the Rendered Fonts :
Family Name: Montserat
Thin Postscript name: MontseratThin - Regular
Font Origin:Network Resource (46 glyphs)

On V1 in Safari Inspect -> Elements -> Font tab -> Identity
Font Name: Montserat Thin

On V2, in Chrome inspect -> Element -> Computed Tab it says the Rendered Fonts :
Family Name: Montserat Medium
Thin Postscript name: Montserat-Medium
Font Origin:Network Resource (46 glyphs)

On V2 in Safari Inspect -> Elements -> Font tab -> Identity
Font Name: Montserat

I have tried also "Montserrat Medium" and "Montserrat Thin" as a font family as outputted in the bottom of the inspect that V1 renders the font family as "Montserrat Thin" and PostScript as "Montserrat Regular" while V2 (right side) only renders as "Montserrat Medium" only. Never "Montserrat Thin" on V2.

I have checked the network tab to see that I am loading the same CSS file from Google. I even tried removing the font weights on the @import.

@import url(';display=swap');

I'm pulling my hair trying to think of anything else that can be set to cause this discrepancy with this font family. And if anywhere the font is being designated as to use Montserat Thin vs Regular?

Essentially the CSS font import is the same. If I change it from @import to embed link I get the same issue.

Changed font to Montserrat and now having issues all over. @import url('https://fonts.googleapis/css2?family=Montserrat:ital,wght@300,500,700&display=swap');

.billboard h1 {
box-sizing: border-box;
color: rgb(255, 255, 255);
display: block;
font-family: Montserrat; 
font-size: 20px;
font-weight: 700;
height: 45px;
line-height: 30px;
}

Set V1 and V2 to load using @import and specifically 300, 500, 700. Essentially just changed the font name on the @import. First thing was 300 rendered as 100. 500 as 500 and 700 as 500.

So changed the @import to call all sizes. @import url('https://fonts.googleapis/css2?family=Montserrat:wght@0,100..900;1,100..900&display=swap');

V1 would render 100, 400 and 700 (as 500 still). V2 would now render 100, 300, 400, 500 and 600. But not anything else even though Google Fonts says there should be more font weights.

On V1, in Chrome inspect -> Element -> Computed Tab it says the Rendered Fonts :
Family Name: Montserat
Thin Postscript name: MontseratThin - Regular
Font Origin:Network Resource (46 glyphs)

On V1 in Safari Inspect -> Elements -> Font tab -> Identity
Font Name: Montserat Thin

On V2, in Chrome inspect -> Element -> Computed Tab it says the Rendered Fonts :
Family Name: Montserat Medium
Thin Postscript name: Montserat-Medium
Font Origin:Network Resource (46 glyphs)

On V2 in Safari Inspect -> Elements -> Font tab -> Identity
Font Name: Montserat

I have checked the network tab to see that I am loading the same CSS file from Google. I even tried removing the font weights on the @import.

@import url('https://fonts.googleapis/css2?family=Montserrat&display=swap');

I'm pulling my hair trying to think of anything else that can be set to cause this discrepancy with this font family. And if anywhere the font is being designated as to use Montserat Thin vs Regular?

Essentially the CSS font import is the same. If I change it from @import to embed link I get the same issue.

Share Improve this question asked Mar 12 at 22:52 John Laprairie 1

Add a comment |

2 Answers 2

Sorted by: Reset to default 0

So this snippet proves that all the Montserrat font weights work.

@import url('https://fonts.googleapis/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

body {
  font-family: Montserrat;
}

.p1 {
  font-weight: 100;
}

.p2 {
  font-weight: 200;
}

.p3 {
  font-weight: 300;
}

.p4 {
  font-weight: 400;
}

.p5 {
  font-weight: 500;
}

.p6 {
  font-weight: 600;
}

.p7 {
  font-weight: 700;
}

.p8 {
  font-weight: 800;
}

.p9 {
  font-weight: 900;
}

<h1>This is Montserrat</h1>
<p class="p1">This is Montserrat 100</p>
<p class="p2">This is Montserrat 200</p>
<p class="p3">This is Montserrat 300</p>
<p class="p4">This is Montserrat 400</p>
<p class="p5">This is Montserrat 500</p>
<p class="p6">This is Montserrat 600</p>
<p class="p7">This is Montserrat 700</p>
<p class="p8">This is Montserrat 800</p>
<p class="p9">This is Montserrat 900</p>

All I can suggest is to use your browser to save one of the rendered webpages to a local file (or set of local files), confirm that the problem still exists, then gradually chop out irrelevant code until you have a minimal example which replicates the problem. Then edit your question to include that minimal reproducible example.

Always test google font API queries

Just open the import/link URL in a browser.
The API is quite unfiving – a single syntax error can easily invalidate the query and you get a 400:

Not working

https://fonts.googleapis/css2?family=Merriwether:ital,wght@300,500,700&display=swap

Only family name

https://fonts.googleapis/css2?family=Montserrat

Works but it will only return the regular weight of a font-family this applies to all font-families (and was also valid in the previous API version 1)

The correct query would be

static

https://fonts.googleapis/css2?family=Montserrat:ital,wght@0,300;0,500;0,700;1,300;1,500;1,700&display=swap

variable

https://fonts.googleapis/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap

For variable fonts you should always make sure the axis are supported – the API is unfiving.

Better use the google font UI if you're uncertain about the supported weights or styles.
avoid swapping font-families manually by replacing the names – you may get an invalid query
better include the 400 regular styles – otherwise you may get weight mapping issues when a default style is applied (e.g default <p> style would take weight 400)

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

css selectors - Monserrat Google Font issue showing different rendered fonts despite same CSS and @import - Stack Overflow

2 Answers 2

Always test google font API queries

Only family name

与本文相关的文章

评论列表(0)