Self-Hosting Fonts Explained - Including Google Fonts - @font-face Tutorial
Kevin Powell via YouTube
AI Engineer - Learn how to integrate AI into software applications
Live Online Classes in Design, Coding & AI — Small Classes, Free Retakes
Overview
Google, IBM & Meta Certificates — All 10,000+ Courses at 40% Off
One annual plan covers every course and certificate on Coursera. 40% off for a limited time.
Get Full Access
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