Self-hosting fonts explained (including Google fonts) // @font-face tutorial

Google fonts are great, but often self-hosting them is a better choice, or if you’re in parts of Europe, it might be your only choice, so in this video I take a look at the basics of how to self-host fonts.

🔗 Links

⌚ Timestamps
00:00 - Introduction
01:05 - Getting fonts from Google fonts
02:03 - The problem with downloaded Google fonts
02:30 - Converting from .ttf to .woff and .woff2
05:35 - Adding the fonts to a project
06:36 - Setting up @font-face rules to use the fonts in our CSS

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

[Karrnfr]

Hello Kevin, I am a Junior developer. I started coding in March of 2022 and I wanted to say thank you for your videos on YouTube(especially one on responsive - you built a blog site). You are a great tutor. I landed my first job as full stack developer. Thank you sir

[proffelipesilva]

Once again you've achieved a good mix between a tutorial and a discussion of relevant issues. It's very noble of you to always reference ARIA during your videos. Message from your BR fan: TÚ É BRABO, FECHAMENTO! TMJ! 🤟🏻

[Flash]

I was literally searching about this an hour ago. How did you know I needed this?

[ceralguy]

As a Web UI Engineer your channel is the best resource for learning CSS in deep, all the topics are very well explained and really encouraging people not to be afraid of work with CSS. Thank you for sharing this content with the community

[ForeverChip]

Ever since i discovered this channel, my learning has been much quicker. U make every problem of mine much simpler to understand, and i would like to really say i appreciate u very much for ur help

[deepinart]

Can't wait for the video on variable fonts, really interesting

[joshw]

I gotta say, I love your vibe and energy. Your content is always engaging, informative, and concise. As a self taught web developer, I really appreciate the work you do.

[MarkusEicher]

Thank you, Kevin. That was helpful, because I have to deal with the German GDPR and I will use this for sure. As always happy to have your content at hand. 🤝

[MrOliver]

Thank you Kevin, I host them already locally but it is good to be conscious to know what it does.

[dieshimitigert]

Your videos are sooo great. I thanky you so much KEvin!

I'm living in Germany and it is really a problem if you use google fonts. So thanks for the great and short explanation :D

[ShawnRitch]

You read my mind lol I was just looking into how to host fonts. Thank you soooo much :)

[SeanCassiere]

Thanks for this, took a while to get up and running with Tailwind but I'm loving it... Interested in what'll be the differences with the "variable" fonts.

[xorlop]

wow, I had no idea about that webfont optimization and had not really heard of all the cross site cache no longer working.... good to know!

[piotrszczesniak]

Thanks for this tutorial Kevin, you are my go to CSS source of truth :)

[BigBaddaBoom]

Thank you for this. This allows me to use more fonts in my projects without offloading my user's privacy by using Google fonts thru the usual means. The idea of loading site data from a dozen servers always made me uncomfortable. This way, it is all local.

[KrisDesChacals]

Once, I had a problem with the font 'Geomanist'. The rendering between the Web font version I had and the one which was on my computer was way different, and the one on my computer was pretty ugly. Since that time, I want to be sure that websites I work on are using the version of the font they provide, so I rename the font-family inside the @font-face with something like 'Geomanist-web' instead of just 'Geomanist'. It's just a simple trick :)

[kenneumann]

Thx. Exactly what I was looking for and easy to understand.

[ttbooster]

thanks! I totally needed that walkthrough!

[goannacs]

I'm from Germany and started learning in November and came across this problem. And now you just make a video about it and even mention my country 🤣

[lynx]

thanks for helping me make my part of the internet more awesome!