Google Fonts and @font-face
Load external fonts from Google Fonts or define custom fonts using the @font-face rule.
Why Custom Fonts?
Web-safe fonts cover only a handful of choices. Custom fonts let you match brand identity precisely. The two main approaches are Google Fonts (hosted service) and @font-face (self-hosted).
Google Fonts Setup
Visit fonts.google.com, select a font family, choose weights, and copy the <link> tag into your HTML <head>:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">All lessons in this course
- Font Family and Web-Safe Fonts
- Font Size Weight and Style
- Text Alignment Decoration and Spacing
- Google Fonts and @font-face