Self-Hosting Fonts Explained - Including Google Fonts - @font-face Tutorial
Kevin Powell via YouTube
Free courses from frontend to fullstack and AI
Learn AI, Data Science & Business — Earn Certificates That Get You Hired
Overview
AI, Data Science & Cloud Certificates from Google, IBM & Meta — 40% Off
One plan covers every Professional Certificate on Coursera. 40% off Coursera Plus Annual.
Unlock All Certificates
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