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: www.axis-praxis.org/
✅ Wakamai Fondue: wakamaifondue.com/
✅ v-fonts: v-fonts.com/
✅ Font converter/compression that I used in this video: everythingfonts.com/ttf-to-woff2
✅ Command line font compression: github.com/google/woff2
⌚ 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
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
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 KZread channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

Пікірлер: 71

  • @ichiroutakashima4503
    @ichiroutakashima4503 Жыл бұрын

    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.

  • @NathanHedglin
    @NathanHedglin Жыл бұрын

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

  • @rittickmondal9458
    @rittickmondal9458 Жыл бұрын

    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)

  • @boheeatelier6681
    @boheeatelier66816 ай бұрын

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

  • @user-yb1gu9zk2m
    @user-yb1gu9zk2m Жыл бұрын

    Great content! Huge thanks for mentioning Kiyiv fonts!

  • @robp.3920
    @robp.3920 Жыл бұрын

    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 🙂

  • @csbyazari
    @csbyazari Жыл бұрын

    Greetings from Turkey. Thank you for your efforts.

  • @Mypstips
    @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.

  • @LiubomyrKlymiuk
    @LiubomyrKlymiuk Жыл бұрын

    Really cool video!

  • @LiubomyrKlymiuk

    @LiubomyrKlymiuk

    Жыл бұрын

    @@benmoon9382 😂😂😂

  • @maurolimaok
    @maurolimaok2 ай бұрын

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

  • @traversethedom
    @traversethedom Жыл бұрын

    Thank You so much Kevin 🙏🏽❤

  • @codehal
    @codehal Жыл бұрын

    Really cool!

  • @shayanzamani9907
    @shayanzamani9907 Жыл бұрын

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

  • @Luminasonique
    @Luminasonique Жыл бұрын

    Hello that's a really cool trick again tank you !

  • @Trazynn
    @Trazynn Жыл бұрын

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

  • @Tjkrusinski
    @Tjkrusinski Жыл бұрын

    Thank you, Kevin.

  • @viajero9751
    @viajero975111 ай бұрын

    Excelent !

  • @Th3S4mur41
    @Th3S4mur41 Жыл бұрын

    Love the t-shirt 🤩

  • @programingwithali2461
    @programingwithali2461 Жыл бұрын

    Cool Video!,Kevin

  • @nomadshiba
    @nomadshiba Жыл бұрын

    this is great

  • @AREACREWBMX
    @AREACREWBMX Жыл бұрын

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

  • @lawrencedoliveiro9104
    @lawrencedoliveiro9104 Жыл бұрын

    3:14 Ah, Jam ... one of the original TrueType GX fonts. I remember playing with them back in 1993, when Apple first came out with its groundbreaking “QuickDraw GX” graphics technology. Other such fonts were Skia and Hoefler.

  • @lawrencedoliveiro9104

    @lawrencedoliveiro9104

    Жыл бұрын

    By the way, for those who don’t know, Jam is emulating a very old, worn typewriter with a terrible ribbon. Hence all the gaps and blotches.

  • @hennter
    @hennter Жыл бұрын

    What you do at timestamp 20:26 with your custom properties, couldn't you declare them all on the body and then only change selected ones in your h1?

  • @nitePhyyre
    @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." 😲

  • @Meinungsmacher

    @Meinungsmacher

    Жыл бұрын

    20mins is no deep dive. take your time and enjoy the video, he spend a lot of work into this…

  • @photomat
    @photomat Жыл бұрын

    Oh wow. I made an icon font. By making that variable, I could make it animate! Do you have any info/tools on creating variable fonts?

  • @sharkinahat
    @sharkinahat Жыл бұрын

    Any sufficiently advanced CSS is indistinguishable from magic. - A. C. Clarke (probably?) I had no idea variable fonts are even a thing.

  • @lawrencedoliveiro9104

    @lawrencedoliveiro9104

    Жыл бұрын

    Very old idea, dating back to the 1990s. Adobe had “Multiple Masters”, and Apple had TrueType GX.

  • @maurolimaok
    @maurolimaok2 ай бұрын

    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.

  • @randomwatermelons6542
    @randomwatermelons6542 Жыл бұрын

    Hello, I am just begining to use VS code, and was wondering your opinion on the built in VS code extension to view HTML as it would appear in a browser vs just a normal browser window. Which do you recommend?

  • @makebooks1128

    @makebooks1128

    6 ай бұрын

    the LiveServer extension

  • @randomwatermelons6542

    @randomwatermelons6542

    6 ай бұрын

    @@makebooks1128 Thanks!

  • @CoconutwCoco
    @CoconutwCoco Жыл бұрын

    hi Kevin could I purchase the beyond css course? I want to learn more abt css architecture

  • @sean.sullivan
    @sean.sullivan3 ай бұрын

    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

  • @anaf4072
    @anaf4072 Жыл бұрын

    Nice video, as usual. Question: where would variable fonts be useful besides some gains in performance? And what about accessibility ( for people with cognitive/neurological disabilities)?

  • @KevinPowell

    @KevinPowell

    Жыл бұрын

    They're great because you can get "in-between" things, like font-wieght 350, which might look best, or even do a weight of 300 for lightmode and 325 for darkmode, since light text on a dark background looks visually thinner, specially if it's thin to start with. For accessibility, mostly about making text as readable as possible, so things like the weights that I mentioned above. Not really aware of much else. I know there are fonts designed specifically to make them more readable for people with dyslexia,

  • @sharkinahat

    @sharkinahat

    Жыл бұрын

    "Atkinson Hyperlegible" is a font that is probably the best when it comes to readability. Now that I've seen what you can do with variable fonts - I imagine adding an end user control panel with just a slider or two to customize how thicc letters are on a webpage would make a lot of people with reading problems very happy.

  • @anaf4072

    @anaf4072

    Жыл бұрын

    @@sharkinahat Happy to see it's a google font. Looks very nice. Thanks Edit: except it doesn't seem to be a variable font. So it can't be used like that, right?

  • @tonystarkmowa
    @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

  • @itsPenguinBoy
    @itsPenguinBoy Жыл бұрын

    I'm thinking you can improve the file size if you delete some characters which you know you won't use for your project.

  • @KevinPowell

    @KevinPowell

    Жыл бұрын

    100% subsetting can go a long way. Some tools out there will do it when the site is built, and only keep the ones you need 👍

  • @_g4rv
    @_g4rv Жыл бұрын

    Thanks for your content! You are doing a great job!💖 But still, keep in mind that Kyiv* is the right way to pronounce the name of a Ukrainian city, and not kiEv - the russian version

  • @KevinPowell

    @KevinPowell

    Жыл бұрын

    Sorry about that, definitely wasn't intentional 🙂

  • @robp.3920

    @robp.3920

    Жыл бұрын

    Isn't the pronunciation varying from country to country? 🇵🇱 ppl definitely don't pronounce it as Kyiv

  • @_g4rv

    @_g4rv

    Жыл бұрын

    @@robp.3920 You are right; some countries may come up with their own pronunciation (as you`ve mentioned in Poland they say "Kijow"), but since English uses transliteration of the city name, it would be fair to use the language of Origin - Ukrainian. (Moreover, in the current situation)

  • @robp.3920

    @robp.3920

    Жыл бұрын

    @@_g4rv You completely ignored the difficulty in pronunciation. It would be fair if you took it into consideration.

  • @_g4rv

    @_g4rv

    Жыл бұрын

    @@robp.3920 If it`s so hard for you to say /ˈkiːɪv/ instead of /ˈkiːɛf/, then I'd advise you to read aloud more to boost your tongue/jow mobility. Wish you the best!

  • @JasonJA88
    @JasonJA88 Жыл бұрын

    My achilles heel is typography.

  • @mykolaharkusha8818
    @mykolaharkusha8818 Жыл бұрын

    Hello from Kyiv. Thanks for video!

  • @makebooks1128
    @makebooks11286 ай бұрын

    I followed this tutorial and everything worked great, but once I deployed a live site, the font isn't loading. Any ideas?

  • @nikolosnik88
    @nikolosnik88 Жыл бұрын

    🧡💛💚

  • @ynokenty
    @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 KZread 😅

  • @TheMetalMag
    @TheMetalMag Жыл бұрын

    nice shirt, I saw the root color doesn't work on my 2011 MacBook Now I know it is something to do with the new computer n new rules in CSS -font squirrel make your font usable on your site..

  • @jabeztadesse
    @jabeztadesse11 ай бұрын

    How to add a Variable Font in Elementor???

  • @lawrencedoliveiro9104
    @lawrencedoliveiro9104 Жыл бұрын

    17:30 A job for CSS custom properties?

  • @lawrencedoliveiro9104

    @lawrencedoliveiro9104

    Жыл бұрын

    20:12 Ah.

  • @CZghost
    @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.

  • @jaspreetmaan121
    @jaspreetmaan121 Жыл бұрын

    Why haven't I heard about this before?

  • @lawrencedoliveiro9104

    @lawrencedoliveiro9104

    Жыл бұрын

    Attitudes to it are a bit mixed. Some people hate it.

  • @prathamesh9990
    @prathamesh9990 Жыл бұрын

    Hi kevin all your videos are greatly helpfull for us. I have a request for you, please speak slower so that it could be easier for many people like me who are not native english speakers and dont have that much fluency in english

  • @noseprogramar

    @noseprogramar

    Жыл бұрын

    you can change the speed of the video to watch it more slowly, it helps :)

  • @emgex4860
    @emgex4860 Жыл бұрын

    Kevin's new video!? Follow next: 👍=>save

  • @Meinungsmacher
    @Meinungsmacher Жыл бұрын

    i don‘t like the idea of having 500 different font styles just bedause its easy to implement that with variable fonts. designers will go crazy 😅

  • @CirTap
    @CirTap Жыл бұрын

    It's spelled "What can my font do?"

  • @_ric
    @_ric Жыл бұрын

    Just a heads up for anyone unsure, it's pronounced Keev, not Kee-iv, the former is the Ukrainian pronunciation while the latter is the Russian pronunciation. I'm sure we can all see why this minor thing is fairly important.

  • @kombinatsiya6000
    @kombinatsiya6000 Жыл бұрын

    CSS's syntax is getting increasingly ugly and verbose after decades off adding tons of shit with no prior planning.

  • @lawrencedoliveiro9104

    @lawrencedoliveiro9104

    Жыл бұрын

    Those four-byte codes come directly from the OpenType spec. You will see them in other apps that support OpenType features/variations.

  • @space8143
    @space8143 Жыл бұрын

    From Kyiv with love ❤ I really like watching your videos 🥰