Web Font Loader Generator
Generate Google Fonts link tags, CSS @import, and @font-face declarations with live preview.
Weights
Selected: 400
Italic
font-display
Shows fallback font immediately, swaps to web font when loaded. Recommended for body text.
Live Preview
<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&display=swap" rel="stylesheet">
You want to use Inter and Fira Code from Google Fonts. The Google Fonts UI gives you a <link> tag, but you also need @font-face declarations for self-hosting, font-display: swap for performance, and only the specific weights (400, 500, 700) to avoid loading 2MB of unused font files.
Why This Generator (Not Google Fonts Directly)
Google Fonts gives you a <link> tag with all selected styles. This tool generates multiple loading methods — HTML <link> tags, CSS @import, and complete @font-face declarations for self-hosting. Choose specific weights and italic variants, set font-display strategy, and preview the font live. Everything runs in your browser.
What Is a Web Font Loader Generator?
A web font loader generator creates the exact code needed to load custom fonts on your website. You pick a font from Google Fonts, choose which weights and styles you need, select a font-display strategy, and get three ready-to-paste code snippets: an HTML <link> tag, a CSS @import, and self-hosted @font-face declarations.
Getting font loading right is not trivial. Load too many weights and your page slows down. Use the wrong font-display value and users see a flash of invisible text (FOIT) or a jarring layout shift. This tool eliminates guesswork by generating correct, optimized code for each loading method.
Google Fonts vs Self-Hosted: Which Should You Use?
Both approaches have trade-offs. The right choice depends on your priorities:
| Factor | Google Fonts CDN | Self-Hosted |
|---|---|---|
| Setup | Zero infrastructure | Requires font files + hosting |
| Performance | HTTP/2, global CDN, browser cache | Full control over caching headers |
| Privacy | Requests log to Google servers | No third-party requests |
| GDPR | May require cookie consent | Fully compliant by default |
| Reliability | ~99.99% uptime | Depends on your hosting |
| Subsetting | Automatic (by unicode-range) | Manual with tools like glyphhanger |
For most projects: Google Fonts CDN is the fastest path to production. For privacy-first or EU-facing sites: self-host using the @font-face output from this tool, then download the font files from Google Fonts or Fontsource.
Understanding font-display Strategy
The font-display descriptor controls what happens between when the browser requests a font and when it finishes loading. It is the single biggest lever for balancing visual stability, perceived performance, and text readability.
swap (Recommended for Most Text)
font-display: swap;The browser renders text immediately using the fallback font, then swaps to the web font once it loads. Users always see readable text, but there may be a visible layout shift when the swap happens if the fallback and web font differ in metrics (size, letter-spacing). Use swap for headlines and body text where readability matters more than visual precision.
block
font-display: block;The browser hides text for up to 3 seconds, then shows the web font (or falls back after the block period expires). This avoids the flash of unstyled text at the cost of invisible text during load. Use block only for icon fonts where fallback characters would be meaningless.
fallback
font-display: fallback;A compromise: ~100ms invisible period, then the browser commits to either the web font (if loaded) or the fallback (if not). Avoids most FOIT and most FOUT. Good for above-the-fold text where you want stability.
optional
font-display: optional;The browser gives the font an extremely short window (~100ms). If it is not available, the fallback is used permanently for that page load and the web font is cached for next time. Zero layout shift, zero invisible text. Best for non-critical decorative fonts and performance-sensitive sites.
auto
font-display: auto;The browser uses its own default behavior, which varies. Avoid auto in production — use an explicit strategy instead.
The Three Loading Methods
Method 1: HTML <link> Tag (Recommended)
<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;700&display=swap" rel="stylesheet">Place this in the <head> of your HTML before your stylesheet. The two preconnect hints tell the browser to open connections to Google’s servers early, reducing DNS + TLS overhead. This is the fastest loading method for Google Fonts.
When to use: Any project using Google Fonts via CDN. Preferred over @import because it does not block CSS parsing.
Method 2: CSS @import
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');Place this at the very top of your CSS file, before any other rules. It is functionally equivalent to the HTML link but blocks CSS parsing until the import resolves. Slightly slower than the HTML method.
When to use: When you control only a CSS file (e.g., CodePen, a CSS-only component library). Avoid in production if you can add HTML.
Method 3: @font-face (Self-Hosted)
@font-face {
font-family: 'Inter';
src: url('/fonts/inter-400.woff2') format('woff2'),
url('/fonts/inter-400.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}Self-hosted fonts give you full control. Download the font files separately (Google Fonts download button, or Fontsource), serve them from your own origin, and reference them via @font-face. No third-party requests means no GDPR concerns and no dependency on Google’s availability.
When to use: Privacy-first projects, GDPR compliance, maximum caching control, offline-capable apps (PWAs).
Optimizing Web Font Performance
Load Only the Weights You Need
Every font weight is a separate network request (or adds to the request payload). Loading Inter in 9 weights (100–900) is 9× heavier than loading just 400 and 700. Audit your design: how many distinct weights are actually used?
Use System Font Fallback Stacks
The better your fallback font matches your web font, the less jarring the swap. For Inter (a humanist sans-serif), system-ui is an excellent fallback on modern browsers because the system UI font is often visually close.
body {
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}Preload Critical Fonts (Advanced)
For fonts used above the fold, add a preload hint:
<link rel="preload" as="font" type="font/woff2"
href="/fonts/inter-400.woff2" crossorigin>This tells the browser to fetch the font at the highest priority, reducing or eliminating the swap delay.
Subset Your Fonts
Most web fonts include characters for many languages. If your site is English-only, you only need a Latin subset. Google Fonts applies subsetting automatically via unicode-range in the CSS it serves. For self-hosted fonts, use glyphhanger to generate subsets.
Font Weights Reference
| Value | Name | Typical Use |
|---|---|---|
| 100 | Thin | Display/decorative only |
| 200 | Extra Light | Subtle headings |
| 300 | Light | Body text on high-contrast backgrounds |
| 400 | Regular | Default body text |
| 500 | Medium | Slightly emphasized text, navigation |
| 600 | Semi Bold | Subheadings, labels |
| 700 | Bold | Headings, CTAs |
| 800 | Extra Bold | Large display text |
| 900 | Black | Hero text, impactful headings |
Frequently Asked Questions
What is the difference between font-display: swap and font-display: optional?
swap always shows text — first the fallback, then the web font when loaded. This can cause a visible layout shift. optional gives the browser a very short window (about 100ms) to load the font; if it misses that window, the fallback is used for the entire page load with no swap. optional eliminates layout shifts but means the web font may not appear on the first visit. On subsequent visits (font cached), it appears immediately.
Why do I need two preconnect links for Google Fonts?
Google Fonts uses two domains: fonts.googleapis.com serves the CSS stylesheet, and fonts.gstatic.com serves the actual font files. The browser cannot preconnect to the font file domain until it has parsed the stylesheet and discovered the font URLs. Adding both preconnect hints lets the browser warm up both connections early, reducing total load time.
Can I use Google Fonts for free on commercial projects?
Yes. All fonts on Google Fonts are licensed under open-source licenses (typically SIL Open Font License or Apache License). You can use them in personal and commercial projects, including SaaS products, without paying royalties. The licenses also allow self-hosting.
How do I load multiple Google Fonts efficiently?
Combine multiple fonts in a single URL by chaining family= parameters:
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">This makes one HTTP request instead of two. The Google Fonts API optimizes the response for both fonts together.
What is FOUT and how do I prevent it?
FOUT (Flash of Unstyled Text) happens when font-display: swap swaps from the fallback font to the web font, causing a visible change. To minimize FOUT: (1) choose a fallback font with similar metrics (x-height, letter-spacing); (2) use the CSS size-adjust, ascent-override, and descent-override descriptors in a custom @font-face rule for your fallback to match metrics; (3) use font-display: optional to eliminate swapping entirely at the cost of first-visit consistency.
Should I use woff or woff2?
Use woff2 as the primary format — it offers 20–30% better compression than woff and is supported by all modern browsers (97%+ global coverage). Include woff as a fallback only if you need to support older browsers (IE 11, older Android). The @font-face declarations generated by this tool include both for maximum compatibility.