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

⌚ Timestamps
00:00 - Introduction
00:45 - What are variable fonts
04:36 - Where we can find variable fonts
07:00 - Font weights - static vs variable
08:35 - Converting a variable ttf to a woff2
10:31 - Setting up the font face declaration to use a variable font
11:35 - Finding the different axis available in a font
15:00 - Working with custom axis
17:30 - Using custom properties to make the axis easier to work with

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[ichiroutakashima]

The only channel I know that actually provides website links so your life would be easier. Thank you so much for providing good content. I'm actually learning more and more.

[csbyazari]

Greetings from Turkey. Thank you for your efforts.

[boheeatelier]

thank you for amazing content, I watch your videos everyday, I am a beginner and this channel is one of the best!

[robp.]

I like to watch your videos. I found your channel only like 2-3 days ago, but the stuff you cover and the way you talk just really speaks to me.
This video is very informative, as I didn't know such a thing existed.
I'm just at the beginning of my journey, but still. I'm struggling to see any use for it.
I would like to know how often is that actually being used as well 🙂
Anyway, keep up the good work. Peace 🙂

[NathanHedglin]

You're always pumping out great content about stuff I didn't know about. Thanks!

[maurolimaok]

Kevin, you're awesome.
I probably would have to see the video more than once
But now I'm understanding

[rittickmondal]

Before watching the video: Thank you, thank you very much I have been waiting for this video for 1 month since you upload the Self-hosted fonts explained (including Google fonts)

[ynokenty]

Hey, KyivType mention was very surprising! Your content is top notch as always, but this just made me regret we don't have any "superlike" buttons here on Youtube 😅

[sharkinahat]

Any sufficiently advanced CSS is indistinguishable from magic. - A. C. Clarke (probably?)

I had no idea variable fonts are even a thing.

[Trazynn]

Found "Scaled/Proportional Content with CSS and JavaScript" on css-tricks, extremely useful for scaling complex css and making it responsive.

[tonystarkmowa]

A kind request for you.

Please make a new Playlists of videos uploaded in last 2 years in a single playlist like course 🥺

CSS PLAYLIST

[Mypstips]

Thank you for the great tips! Congratulations on your youtube channel! I used to be a student of yours at the Rosemont Technology Center.

[shayanzamani]

just noticed you cool t-shirt...love it :)

[AREACREWBMX]

Hi Kevin, Where do you downloaded your fonts that you usually use?

[boukhalfatarek]

Greetings
Thank you for the great videos you make
I tried the steps you mentioned in this video, but when i use font-family:'Roboto' ; nothing changes (it keeps using the default font of chrome which as i know is times new roman) and when i add (, sans-serif) the font changes to roboto

[AntoniiVeremko]

Great content! Huge thanks for mentioning Kiyiv fonts!

[CZghost]

Seriously, CSS variables are overpowered. No matter what limitation a certain property implies, you can just slap the values in some variables, and call those variables. And redefine only those you want. CSS variables seriously make the web dev so much easier.

[maurolimaok]

That's it.
For now I just want at most 3 great reading fonts do read on Obsidian. That's all.
Variable fonts, for that, is a no go.
Again, thanks, a lot.

[nitePhyyre]

20 min? I don't need a deep dive I just want an intro!

"We're not going to be doing a deep dive, this is just an intro."

😲

[sean.sullivan]

what would be the additional css needed to apply this on a per character basis? I'd like to use a short phrase but have the hover change the variable font on individual letter