How to Add Custom Google Fonts to Your Website (SCSS + @font-face Tutorial)
In this video, I'll show you how to add custom Google fonts to your website completely from scratch. If you've ever wanted more control over your site's typography than the default Google Fonts gives you, this tutorial walks through the entire process of using custom Google fonts in a real project, step by step.
We'll start by downloading the custom Google fonts you want to use directly from Google Fonts, instead of linking to their hosted CDN. From there, I'll show you how to add these custom Google fonts into your project folder structure so they're organized and easy to maintain.
Next, we'll write the @font-face rule needed to register your custom Google fonts in CSS, and I'll explain exactly what each property does so you're not just copy-pasting code without understanding it. Finally, I'll show you how to apply and use your custom Google fonts in SCSS, including how to set up font variables so you can reuse them cleanly across your entire stylesheet.
By the end of this video, you'll know how to self-host custom Google fonts, write clean @font-face rules, and use SCSS to manage typography in any static website project.
A great tool I use is fontpair.co. It's a site so you can select font pairings that have been tested to work well together. Check them out for inspiration