When using @font-face, how many styles do you have to download?

Let’s say you want to use a font with styles thin, normal, italic, semi-bold, and bold. Do you have to download all 5 styles when using @font-face?

Hi, there!

You would need to create a different @font-face for each of your styles. This is because each file contains the data needed for that specific style. The only difference, I believe, would be with variable fonts because variable fonts have their own properties to create specific stylings.


What are variable fonts?

Variable fonts are truetype fonts that pack all of their styling into a single file. Their file sizes can be pretty large (if the font has a lot of styles) and should probably be condensed before using (though some of these programs will remove the ability to manipulate the font)

There is a lot to discuss about variable fonts, I would suggest looking up resources to discover more or for what reasons you would want to include them inside a project.

While having the ability to control a single font without having to include more files may be convenient, it’s nice to remember that a single solution may not be the be-all to end-all.

1 Like

Yeah, I googled it and it’s very interesting. Cool idea letting users control weight and all.

1 Like