Self-Hosting Fonts Explained - Including Google Fonts - @font-face Tutorial
Kevin Powell via YouTube
Overview
Learn how to self-host fonts, including Google fonts, in this comprehensive tutorial video. Explore the basics of font self-hosting, from obtaining fonts from Google to converting file formats and implementing @font-face rules in CSS. Discover why self-hosting can be a better choice than using Google Fonts directly, especially for users in certain European regions. Follow along as the process of converting .ttf files to .woff and .woff2 formats is demonstrated using the Font Squirrel Webfont Generator. Gain practical knowledge on adding fonts to your project and setting up the necessary CSS rules to utilize them effectively.
Syllabus
- Introduction
- Getting fonts from Google fonts
- The problem with downloaded Google fonts
- Converting from .ttf to .woff and .woff2
- Adding the fonts to a project
- Setting up @font-face rules to use the fonts in our CSS
Taught by
Kevin Powell