variable fonts or static and some other concerns about fonts
From my understanding a variable font file contains all the styles from static fonts. So I don't need static fonts then? Do I need both italic variable and normal variable font files if I am using italic syle for fonts?
Is there a difference between setting font weight in @font-face rule vs in css font-weight property?
What should I do if a font only has static font files and not variable? Like Poppins on google fonts download doesn't provide a variable font.
can I convert ttf variable font files into woff/woff2 via online converters? or does these mess things up
60 Replies
You don't need static fonts if you have the variable version, but check how well it renders, some variable font files are auto-generated or have weird sizing artefacts.
You may need the italics as well because they're often separate glyphs. But it depends on the font. Fonts can be variable on multiple axes, some have 'slant' rather than a true italic.
If you're using a custom font, you need to import it into your CSS. The @rule lets you do that, lets you assign files to a font family name (which could be anything you want to use as a shorthand) and assign individual files to specific settings, eg use the 800-weight file whenever the browser engine wants bold. Setting font-weight on an element is telling the browser what weight to use for that element; setting it in the @rule is telling it what file to use for a given weight/style/name.
If you only have static files, use static files.
You can convert variable ttfs to woff2, but test it before putting it in production.
Decent sources for further reading: https://abcdinamo.com/news/using-variable-fonts-on-the-web
Dinamo Typefaces
Using Variable Fonts on the Web
Dinamo is a Berlin-based type design studio offering retail and bespoke typefaces, design software, research, and consultancy. We operate via a network of…
something important to keep in mind: variable fonts arent just one font that has all the other variations in it
it has all the "math stuff" to change the look - a font weight of 456 is perfect fine for a variable that allows the value
it doesnt have a 400 and 500 in it
it also can have other attributes, like different numbers, a 0 with or without slash, colors (useful for emoji) and more
and, as you can guess, that can make the variable font be a big chunky file
if all you need is 400 and 700, it might be worth it to do not use variable fonts
Thanks this helped a lot. I didn't know that font files had axes or the font variation settings css property
So you mean. For example a variation font can only allow values from 400 to 700 for wght axis. And it would not allow 207 or 718
Also is there a tool to check these values?
The article Alex linked mentioned this fontgauntlet.com website. Is that currently best one or are there other recommendations
variable fonts have many many things that you can set (not all of them)
no. what im saying is that a variable font would allow any value within it's supported range
assume the range is 100 to 1000
you can pick ANY number between 100 and 1000, inclusive
and the font just magically changes
but if you just use 400 (normal) and 700 (bold), you may find that the variable font uses a lot more bandwidth
and is a lot bigger than just a static 400 and a static 700
I thought I said the same. Did you take it as I meant
can only choose 400 or 700 instead of can choose between 400 to 700
Or am I confusing somethingyou mixed everything
here is where it is all mixed up
you mixed aspects of static and variable fonts
Hmm let me type it again.
A specific variable font allows values between 400 to 700 range.
And if you use 213 or 718 they would be unsupported by that font.
Is that better
yes
but the browser could do fake bolding
Gotcha. Do static fonts have hard-coded values or do they also have ranges but very very small
none
wait, no, they have the hardcoded value
So like Poppins regular would be hard-coded for 400
yes, and bold to 700
and if you use the regular only but set it to bold, the browser will do it's best to make it bold, even if it looks like ass
Gotcha
So if I'm only using few ranges like 400 and 700 it's better to just do two font face rules like this
Then when I do font family Poppins and font weight 400 it'll select the file from first rule and if I do 700 it'll get the file from second rule
i don't know if it is better or not: you will have to figure it out
for example, downloading 2 fonts is 2 requests to the server
but a single variable font is just 1
so, is it worth it to use the (usually) bigger variable size?
or use smaller static ones, but more of them?
if you live somewhere with terrible internet, then maybe the variable font is better, as it saves 1 request
if you live somewhere with an heavy mobile user base, but mobile data is costly and you dont get much, the 2 separated static font files is fine
if you host in a free host, where high bandwidth can get your site to be shutdown and/or removed, smaller static fonts is better
if the host also tracks requests and limits the number, it is harder
Gotcha
variable or not is a pesky decision that you can change at any point, but can have a positive or negative impact
Yeah. until now I only used variable fonts out of habit today i had to download a font that didn't have variable so these questions popped up in mind.
Something to experiment and see
you can usually find the variable font if you googke a bit
poppins has a variable version
Oh there's on their own GitHub repo. Yeah I didnt search enough. My bad
you now can compare the sizes and decide: variable or not?
if i remember correctly, poppind was 10x the size of the static version
the bold and regular varients are around 300 kb combined
variable (no italic) is 470kb
50 kb for regular and bold when converted to woff
150 kb for the variable
not much difference it seems unless accounting for terrible internet
if you dont mind the extra size, i would go for the variable one
the flexibility is unbeatable, and you also do fewer requests
yeah I am going for the variable
I won't use italic style for it but if i did I would need that too right
like this
sorry if this seems dumb I'm still trying to understand these
italic doesnt have quotes
also, you need to specify the font weight on both
you should include this anyways, as the font wont be loaded unless needed
and if you need it in the future, but forgot to set this, you will have to add it anyways
it's just 200 bytes of css, or so
won't font-weight make it so the file is only fetched with that specific font-weight
yes and no
yes, it will do that
no, it also tells the browser what the file supports and how to handle faux-bold
if you set 300-900, but you have a text with 100, then it will load the 300-900 font and force it to 100 by maths and stuffs
and if you set something to 1000, then it still uses the 300-900 and then fakes to 1000
if you had a font with 100-400 and another for 500-700, and you use 900, it should load the 700 and make it look like 900 - with faux-bold
what happens when I don't set any font weight
it does the forcing by math stuff always in that case?
that is a good question
im not sure if the browser just downloads the font and then uses it, or if the declaration is invalid
i would lean on it being invalid, but, i dont know
just did a test using network tab
it seems to fetch them
if i remove font style italic from second heading then it only fetches the normal variable font
if you remove the font-style, it assumes it is normal
but im surprised it loads without a font weight
I've been using it without font-weight all this time. I'm guessing best practice is to be explicit about weight range
you should
i read mdn, and the default value is
normal - 400
https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-weight#formal_definition
so, you are saying that those have a font weight of 400, and that's it
i believe the range of that is 300-900
there are tools online that will tell youabout the wght axis range in a font file?
also I set the range to 400 700 then tried to do font weight 100 on h1 and it didn't go below 400
it did go below when i removed the range
🤔
i would expect it to use faux-bold
i mean, that is what it is supposed to do 🤔
using 400 700 range
removing the range
using font-weight: normal explicitly in @ font face
🤔 that is interesting
that is the exact same font size?
this
and this
they look different
maybe normal isn't 400
not sure then
They look similar to me
this is 300
this is 500
https://drafts.csswg.org/css-fonts/#valdef-font-weight-normal the spec draft specifies the same: normal is 400
maybe it's discord messing with me
Maybe, I can't tell the difference on browser
i can on my phone
see?
but yeah, leave out the font-weight
seems to work better
mdn's examples dont have it too
Kk thanks
today i learned you dont need a font-weight for the
@font-face
and i learned i was wrong about the fake boldKevin’s video may clear up some questions
https://youtu.be/0fVymQ7SZw0?si=_K1W6jYcOmN87TH4
Kevin Powell
YouTube
Getting started with Variable fonts on the web
Variable fonts are really awesome and open up some new doors for typography, so in this video I take a look at what they are, how they work, and how to use them on your websites.
🔗 Links
✅ Axis Praxis: https://www.axis-praxis.org/
✅ Wakamai Fondue: https://wakamaifondue.com/
✅ v-fonts: https://v-fonts.com/
✅ Font converter/compressio...
Wakamai Fondue
The tool that answers the question “what can my font do?”
this website from the video is awesome
I can checkout what styles a font offers and their range