As I was testing out many fonts for this site, I decided to change my font to DM Sans font (for now 😅).
This site was built using Astro framework, so I went with their recommended way of using custom fonts, which is through fontsource.
While visiting fontsource to download DM Sans font, I noticed that the font is available in two versions: static and variable, and I wondered what the difference is.
I looked it up and today I learned that:
Static Font
A static font is basically a fixed font where every style is separated into its own file. Styles like italic, bold, and different font weights from the supported range.
For example: DM Sans Static
If I want to use font weights 700, 500, and 400, I need to download and install the file for each specific font weight separately.
Using fontsource:
import "@fontsource/dm-sans/700.css";
import "@fontsource/dm-sans/500.css";
import "@fontsource/dm-sans/400.css";
Variable Font
A variable font is a font that supports all styles in a single file.
If I want to use it, I can just import one file, and it will automatically load all the styles. I don’t need to specify specific font weights when I’m importing it.
Using fontsource:
import "@fontsource-variable/dm-sans";
Does this mean the variable font file is bigger than the static font file and can affect performance when loading it?
Not necessarily, because with a variable font file, the browser will only load the font styles that are actually used on the page. Also, we will be left with only one network request to load the font file, as opposed to multiple network requests for static font files.
Also, combining it into one file as a variable font doesn’t necessarily mean it’s literally mixing everything into one file. There are a lot of optimization methods that come with it, to some degree, such that sometimes the variable font file can even be smaller.