GoogleLesson 319Free preview

Google Fonts

This lesson is part of How To · All levels

Summary

Google Fonts is a service that provides free web fonts for use directly on a page. You insert a font style sheet link into the head section, and then call the font name on the font family property. Add display=swap to keep the text from showing with the backup font while the main font is loaded.

Key points

Link the Google Fonts stylesheet to the head element
Determine the weight and style that you actually use to make the load light.
Use display=swap to avoid the invisible text
Include a backup font such as system-ui or sans-serif
Limit the number of fonts so that the page stays fast

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.