Member-only story
Stop importing Multiple Fonts and Start using Variable Fonts
Learn how you can make Variable Fonts work to your advantage in this beginner-friendly article.
Variable Fonts.
Maybe you already know all about them.
Maybe you have no clue what they are.
In this short article, I’ll take you through how you can use variable fonts to your advantage in creating efficient & fun websites.
Introduction
Variable fonts sure are something cool! They allow you to dynamically change certain properties of a typeface/font.
Why is this cool?
Well, normally when using a custom typeface, you will need to import a ton of different fonts.
For example, let’s say you want to use the typeface “Roboto” and use a regular font-weight (400), a bold one (700), and a black one (900).
You will need to import all three of these fonts, which can affect your page’s performance pretty badly.
Imagine needing even more different typefaces and fonts!
This is where variable fonts come into play.
Instead of needing to import multiple fonts for all the different weights and italics you are using, you need to import just ONE.
Follow along
So to follow along with this article you can open up your text editor, but I also created a couple of Sandboxes so you can see how it works without having to touch any code yourself.
These are the steps we will be following:
- Link to the Font
- Set the Weights
- (extra) Change the Weights
That’s all you’ll need 😄
Link to the Font
So to start, we’re going to need one of those variable fonts.
There’s this great resource called v-fonts.com where you can find loads of them.
I found a great font called “Roboto Delta” hosted here. I’ll be using this from here on.
