How to use font-stretch with Google Fonts variable fonts in CSS
Variable fonts that allow free setting of weight and width.
Even though I loaded variable fonts from Google Fonts, "font-stretch" and "font-variation-settings" don't work! This happens often, right? (No it doesn't)
For example,
when you want to set
"Noto Serif Display"
to "Regular 400 italic" with
"font-width: SemiCondensed"
Normally, you select and load "Regular 400 italic"
You specify the CSS like this, but
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Display:ital@1&display=swap');
.notoserif {
font-family: 'Noto Serif Display', serif;
font-size: 4rem;
font-stretch: semi-condensed;
}As it is, "font-stretch" will not work.
(Reproduction)
font-stretch: unspecified
Variable Fonts
font-stretch: semi-condensed;
Variable Fonts
How can I use font-stretch?
What about the file size when multiple fonts are loaded?
I will explain these points.
Table of Contents
Correct loading method
The correct way is
- Open "Type tester"
- Change to your preferred settings
- Click "Select +" on the one that appears below
- It has been added to the right, so load it with this.
Then, we confirmed that "font-stretch" is working!
For comparison
font-stretch: unspecified
Variable Fonts
font-stretch: semi-condensed;
Variable Fonts
File size when adding various font-widths
When you want to use various font-widths (font-stretch) like normal (100), semi-condensed (87.5), or condensed (75), you need to load all of them.
I was curious, so I investigated: Does the page size increase accordingly?
① normal only
At this time, the size of the loaded font was 14.2KB.
② Added SemiCondensed
At this time, the size of the loaded font was 26.9KB.
As expected, it increased.
③ Added Condensed
For some reason, it was unchanged from before.
※ Verified with cache cleared.
"normal" needs to be loaded separately
Other than that, if you load even one, the size does not change no matter how many you add.
Regarding Weight, the first one increased in size, but subsequent ones did not change.
Loading just this amounted to 86KB.
Therefore, even when you want to use multiple styles, you don't seem to need to worry too much about file size.
It might differ depending on the environment and font, so please use it while observing the situation.
If this was helpful, we appreciate your support!
The support received will be used for childcare.
Or buy something from the buttons below to support us
(You don't have to buy the linked product.)
Amazon
Rakuten Ichiba
Yahoo! Shopping
PR