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'); }