What Is a Web Font and How Does @font-face Work?
Learn what a web font is, how the @font-face rule loads custom typefaces, and why font-display: swap prevents invisible text while fonts load.
Expected Interview Answer
A web font is a custom typeface file (WOFF2, WOFF, TTF) loaded and embedded into a page via the CSS @font-face rule, so visitors see the exact typography a designer intended instead of being limited to fonts already installed on their device.
Before web fonts, sites could only reliably use a small set of 'web-safe' fonts pre-installed on most operating systems. @font-face lets you declare a font-family name, point it at a hosted font file, and then use that family name anywhere in your CSS; the browser downloads the file (often from a service like Google Fonts or self-hosted) and renders text with it. Because a font file is an extra network request that can block text rendering, best practice pairs @font-face with font-display: swap (show a fallback font immediately, swap in the web font once loaded) and next/font or similar self-hosting to avoid render-blocking, layout shift, and privacy concerns from third-party font CDNs.
- Lets designers use any typeface, not just OS-installed fonts
- font-display: swap avoids blocking text render while loading
- Self-hosting avoids third-party requests and privacy leakage
- Consistent branding and typography across all visitors' devices
- WOFF2 compression keeps font file sizes reasonably small
AI Mentor Explanation
A web font is like a touring team bringing their own custom-branded kit supplier instead of relying on whatever spare jerseys happen to be lying around the host ground. @font-face is the shipment manifest telling the kit man exactly which crate to open and which jersey design to issue, while font-display: swap is the team wearing a plain training bib the moment they walk out.
Step-by-Step Explanation
Step 1
Declare @font-face
Define a font-family name and point src at one or more font files, typically WOFF2 with a WOFF fallback.
Step 2
Reference the family in CSS
Use font-family: 'YourFont', sans-serif; anywhere, with a system fallback listed after it.
Step 3
Browser downloads the font file
On first use, the browser fetches the font file as a network request, which can delay text rendering if unmanaged.
Step 4
Use font-display: swap
This shows the fallback font immediately, then swaps to the web font once it finishes downloading, avoiding blocked/invisible text.
Step 5
Prefer self-hosting where possible
Self-hosting via next/font or local files avoids third-party requests, improving performance and privacy versus external font CDNs.
What Interviewer Expects
- Explains what @font-face does and its basic syntax
- Knows the purpose of font-display: swap
- Understands the performance risk of unmanaged font loading (FOIT)
- Mentions WOFF2 as the modern compressed font format
- Discusses self-hosting vs third-party font CDNs tradeoffs
Common Mistakes
- Not specifying a fallback font-family after the custom font name
- Forgetting font-display, causing invisible text while fonts load (FOIT)
- Loading multiple font weights/styles unnecessarily, bloating page weight
- Assuming web fonts load instantly with no network cost
Best Answer (HR Friendly)
“A web font is a custom typeface loaded onto a page instead of relying only on fonts already installed on a visitor's device. Using @font-face with font-display: swap lets text remain readable in a fallback font while the branded font downloads in the background, avoiding blank or invisible text.”
Code Example
@font-face {
font-family: 'BrandSans';
src: url('/fonts/brand-sans.woff2') format('woff2');
font-weight: 400;
font-display: swap;
}
body {
font-family: 'BrandSans', system-ui, sans-serif;
}Follow-up Questions
- What is FOIT and FOUT, and how does font-display control them?
- Why is self-hosting a web font often preferred over a third-party CDN?
- What is WOFF2 and why is it the preferred web font format?
- How do you preload a critical web font to speed up rendering?
- How does next/font optimize web font loading in Next.js?
MCQ Practice
1. What CSS rule is used to load a custom web font?
@font-face declares a custom font-family and points it to one or more font files for the browser to download and use.
2. What does font-display: swap do?
font-display: swap ensures text stays visible with a fallback font while the custom font downloads, then swaps it in when ready.
3. Which font format is preferred today for smaller web font file sizes?
WOFF2 offers superior compression over older formats like TTF and EOT, making it the standard modern web font format.
Flash Cards
What does @font-face do? — Declares a custom font-family and loads a font file for use in CSS.
What does font-display: swap prevent? — Invisible text while a custom font loads (FOIT), by showing a fallback font immediately.
What is the modern preferred web font format? — WOFF2, due to its superior compression.
Why self-host web fonts instead of using a third-party CDN? — Better performance control and avoids third-party privacy/tracking concerns.