These font stacks will improve your site performance

Web fonts have made the web a much nicer looking place, but if we don’t put the work in to host them properly and optimize them, they can be heavy files that slow things down and lead to FOITs and FOUTs, which is never great for the user experience.

Luckily, modern font stacks can help a lot with that!

🔗 Links

⌚ Timestamps
00:00 - Introduction
00:30 - The problem(s) with Google Fonts
01:40 - the best font to start with
02:26 - simple font stack for system-ui
03:35 - The “original” system-ui stack
05:00 - Advantages of system-ui
06:09 - Other font stacks that take advantage of system fonts
07:30 - Different fonts across different operating systems is okay
09:35 - Use web fonts where users will actually notice them

#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!

[KevinPowell]

If you're going to complain that we need nice fonts for any range of reasons, please watch to the end before jumping to conclusions, because I do address this, including a nice compromise to using both system and web fonts.

[jimfilbert]

It took me until today to realize Kevin is saying “hello my front-end friends” and not “hello my friend and friends” and I’ve watched all of his videos.

[rayskinner]

Convincing designers to use System Fonts is a scary proposal.

[ikrpqzg]

Next.js did great thing on their next/font package. It allows to automatically self host a font, but also provides automatic zero shift fallback for when main font has not loaded yet

[jmagrippis]

I love the Wordpress tip / insight in the end, a “fancy” font for the “brand” and then system fonts for the rest. You could even just bring the letters you need if you’ll just use it for a logo and 3 words 😛

I’ll combo the tip in for designers, I’ve been saying “you get one font, but it’s variable so all the weights”, with “you get one font + system fonts” and see how it goes 😄

[StefanHolmes]

Well done calling out the GDPR issue with Google Fonts!

[AleksanderFimreite]

I'm currently working on migrating my website from a 3rd party to a self-hosted setup.
And I have not bothered picking a font yet, so this showed up in a really convenient time for me.
Despite knowing my way around css, I'm not really a web developer. So, I really fall short on the awareness of what is possible here.
I feel your channel is providing me with lots of useful knowledge to build up my arsenal. Thanks.

[nitrohite]

This is super insightful, specially your final point I think it's spot on. Thank you as always, Kevin!

[hyperprotagonist]

Typography doesn’t matter to devs. Working with brand agencies for 15 years, I can tell you it absolutely matters. Also, system ui fonts are not chosen willy nilly. The system itself is brand driven.

[ollio]

That is not an option. The corporate font is a very (most?) important designelement. Also we selfhost the (google)fonts and always get a 100% pagespeed (untill the customer wants 3rd party shit, youtube or ads)

Love your content!

[kacCid]

Great video as always! I'm a developer for market research software. I know it's kind of a niche, but I have to deal with cross browser/device consistency for the end-end user (e.g. survey participants) in a very detailed way everyday. It really comes down to things like the width of actual labels/strings sometimes. Because how things look, oc can have an effect on answer behavior. In professional market research you want to have absolutely perfect comparable datasets between different users (oc filtered to at least the devices used).
Answer options:
Very unsatisfied
_just looks different than_
Very
unsatisfied

[MaxWeir]

So great you’re covering things like this, I’d love to see a video on explaining and fixing issues on the upcoming Next Paint (INP) metric and with examples like say a slow carousel.

[TommyTheMooch]

One of the best channels on YouTube for me. Don't let negative comments guide your content. They choose to be here and some people will always be too smart for us. Even when they're not.

[trinkel]

Oh my god such a refreshing point of view. Or, not so much refreshing, but to actually say it out loud. I think the heading compromise is a nice way to work around look vs feel.

[stephanemo]

Thank you again. So much value in your videos.

[DarrenbyDesign]

Thanks for posting this and helping me understand system UI more!

[alexanderthacker]

As someone who uses Ubuntu mainly, I tested it out to see what fonts are used. system-ui becomes the "Ubuntu" font which makes sense and is a good font, but sans-serif becomes "Noto Sans" which I think is much nicer.

[thetakburger]

Just tried system-ui on my project that used Inter. The difference is so minimal. Totally convinced. Thanks

[TomasMisura]

improving of performance is stuff i am currently to deal with. I'll try to implement the most of your advices and recommendations

[Shaheer-xsos]

Damn, That font really looks cool! thank you for recommending it, never realized that I could use system fonts like that...