Beginner-Friendly Topic
Take your time - it's perfectly normal to re-read this topic 2-3 times. Try the interactive code editor below to run code yourself. Use the Q&A section to check your understanding before moving on. You've got this! 🚀
Google Fonts & @font-face
Custom fonts transform your design from generic to professional. Google Fonts offers 1,500+ free fonts. @font-face lets you load any custom font file. Understanding font loading and performance is essential for fast websites.
Loading Custom Fonts
- Google Fonts - Free, CDN-hosted fonts. Add a <link> tag in HTML <head> or @import in CSS
- Popular choices - Inter (modern UI), Roboto (Android), Poppins (friendly), JetBrains Mono (code)
- @font-face - Load your own font files: @font-face { font-family: 'MyFont'; src: url('font.woff2'); }
- WOFF2 format - The standard web font format. Smallest file size, best compression, widest support
- font-display: swap - Show fallback text immediately, swap when custom font loads. Prevents invisible text (FOIT)
- Font loading performance - Limit to 2-3 font families. Each adds a network request. Preload critical fonts
- System font stack - font-family: system-ui, -apple-system, sans-serif. Uses the OS native font (fastest, 0 downloads)
Font Loading Code
<!-- Google Fonts (in 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=Inter:wght@400;600;700&display=swap" rel="stylesheet">
/* Using Google Fonts in CSS */
body {
font-family: 'Inter', sans-serif;
}
/* @font-face - self-hosted fonts */
@font-face {
font-family: 'CustomFont';
src: url('/fonts/custom.woff2') format('woff2'),
url('/fonts/custom.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap; /* Show fallback immediately */
}
/* System font stack (fastest - no downloads) */
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, 'Helvetica Neue',
Arial, sans-serif;
}Tip
Add rel='preconnect' to your Google Fonts link tags - it establishes the connection to Google's servers before the browser discovers the font in your CSS. This simple addition can shave 100-200ms off font load time on first visit.
Use rem for fonts, % for widths, vw/vh for full-screen layouts
Common Mistake
Loading too many Google Font weights is a common performance killer. Requesting all 9 weights downloads every variant. Only request what you actually use - most sites need just 400 (regular) and 700 (bold). Unused weights waste bandwidth.
Practice Task
Go to fonts.google.com and choose 2 fonts: one for headings (try Poppins 700) and one for body text (try Inter 400). Copy the HTML link tags, paste them into your project's <head>, and apply with CSS. Compare the visual difference vs the default browser font.
Quick Quiz
Key Takeaways
- Custom fonts transform your design from generic to professional.
- Google Fonts - Free, CDN-hosted fonts. Add a <link> tag in HTML <head> or @import in CSS
- Popular choices - Inter (modern UI), Roboto (Android), Poppins (friendly), JetBrains Mono (code)
- @font-face - Load your own font files: @font-face { font-family: 'MyFont'; src: url('font.woff2'); }