`@font-face` variable font issue
Quick question, my font-face declaration with a variable font file isn't changing the font weight when I change it via css:
When I go in dev tools and change the font-weight, it doesn't actually change it. It's not a styling conflict. This is a variable font downloaded from Google Fonts
26 Replies
what happens if you remove the
font-weight descriptor entirely? And which selector are you setting the font weight on?It may not be loading at all , try changing the name (on the local too) in case you have open sans installed on your device and see if it still looks the same.
This is an aside, but it's also worth noting that Open Sans on Google Fonts doesn't have weights 100 or 900; it goes from 300 to 800
Apologies if this isn't the issue, but there's a difference between
font-weight as a descriptor in an at-rule and font-weight as a property on a selector. Setting it in the at-rule simply tells the browser which file to use for which weights of font; to change the font rendered, you have to have to set the property on the selector, e.g.
Hey guys sorry for the late response, good catch on the 300 800 font weights let me try that
thank you for all the responses! unfortunately though none of that fixes the issue 😭
I've:
1) set an explicit font-weight on the element
2) changed the font-weight on the @font-face declaration to
300 800
3) checked that the font is loading in the browser
I was thinking it might be something to do with me changing the file from .ttf to .woff2, but I used the original .ttf font file from google fonts and it still isn't variable
Oh, I removed the local() function and it worked!
It shouldn't be doing that I feel like though 😅that should have worked
maybe you have an "open sans" variant installed
or maybe it fails because you're declaring the font and trying to load the font with the same name
They have a variable version on Open Sans but you need to be careful which one you select from the download.
The ones in the static folder are the none variable one. The first two ttf files are the variable font you can use on the web without any problem.
What WOFF and WOFF2 essentially is that they are "just" compressed TTF and OTF files and no special font format. They don't introduce new feature to fonts.
* WOFF: It takes the underlying data from a TTF or OTF font, compresses it using gzip, and adds metadata related to web usage (like licensing information).
* WOFF2: Uses a more efficient compression algorithm (Brotli) than WOFF, resulting in even smaller file sizes.
There are multiple converters on the web that allow you to package the ttf files into woff or woff2 files. TTF and OTF files on the web are just fine and the browser or CDN's can convert them into woff files on the fly.
In the network trace you will still see a ttf file but in the header you see that they will be served as a WOFF/WOFF2.
Thank you, very informative!
Yea I have no idea but I removed the
local() function for now
I can test a bit later why it's doing that
Maybe I just have an open-sans-400 variant installed for example and it's just using that one if that's what you're saying
But if it's happening to me it'll happen to other people too so I just removed local() for nowyup, that may be it
and it uses non-variable variants
which is the smart thing to do
That sounds like a bug in the core css behavior
I don't think it's anything on my end. But at the end of the day I did all this to make the page speed faster so even if i'm not using local() it'll still be a lot faster than using the @import or <link> for gfonts and no tracking data too
it's not a bug, it's a feature
sadly, the feature doesn't behave as you expect because the variable and non-variable fonts have the same name
Yea but I feel like they could handle it better somehow
Not sure how they'd do it
local means it first looks if you have it locally installed and for that you would have had the Variable Font installed. That's might the issue.
they kinda can't, if it has the same name
for all intents and purposes, it is the same font
I have no idea how font files work but couldn't they have some meta data attached to the font file that specifies if it's variable or not
and then the local() function could check for that if you gave
font-weight a rangethey do, but you're saying "use this anyways"
you can limit it with the
tech() thingy
not sure if it works for local fontsI think I saw that when I was researching this but it just seemed like a lot of extra work
it is
variable fonts are a pain in the ass to use
Still better than loading it in via a link or @import though hehe
To be on the safe side you could have renamed the font-family: "Open Sans"; to font-family: "Open Sans Variable" - Since it does not matter what is in there as long as you reference it in your CSS as "Open Sans Variable" 😉
In addition you can check if the file is take from local - Its in Chrome under "Computed"
or from a the network.
Ohhh that's a great point and I didn't know about the network tab showing how the fonts get loaded 👀 ty!
Network tab works too but directly under the computed styles you have a dedicated section for rendered font in Chrome.
if the local "rule" is there, it will still try to check the local fonts with that name, and the issue may still happen
renaming the font is always a good idea
Yeah sorry haven't thought about that 😉
when using variable fonts, it's best to do not even include the rule at all
unless you have a .eot file for ie, for some bizarre reason
and on the renaming you can go crazy like "my fancy font"
The computed tab - rendered font works a bit different because it shows the name that is metadata backed into the font.
It doesn't show the virtual name as used in CSS:
Yeah but not even Microsoft support IE anymore 🤣
ie was dropped at the same time as windows 8 was dropped
that's a bit weird, but makes some sense