Generator Tools
Google Fonts Embed Generator
Build the exact link tag, @import rule, and CSS font-family declaration for any Google Font. Pick weights, italics, display=swap, and subsets in your browser.
Variants
Toggle individual weights and italics. The URL only ships the variants you choose.
Inter
Sans-serif, variable
Regular weights
Italic weights
Options
font-display
Recommended. Browser shows fallback immediately, swaps when font loads.
Preconnect hints
Optional subsets
Limit the download to specific Unicode ranges. Leave all off to let Google serve the default subsets.
Useful for logos and headlines. Google returns only the glyphs needed for the given characters. Leave empty for the full font.
Generated CSS request URL
https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap
HTML link tags
Paste inside the <head> of your page.
<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">@import rule
For CSS-only setups. The link tag form is faster.
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');CSS font-family usage
Each rule includes a sensible system fallback so text renders before the font loads.
body {
font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}Inter
Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif
Live preview
No network request is made until you click Enable preview. After that, your browser fetches the same stylesheet the embed code points to.
Inter (preview shows your system fallback)
400The quick brown fox jumps over the lazy dog
600The quick brown fox jumps over the lazy dog
700The quick brown fox jumps over the lazy dog
How to use
- Search and click fonts in the picker. Use the category filter (Sans, Serif, Display, Handwriting, Mono) to narrow the list.
- For each selected font, toggle the regular weights and italic weights you want shipped. Every extra variant adds bytes, so pick only what you use.
- Pick a font-display mode. swap is the recommended default. Toggle Preconnect link tags off only if you already have preconnects elsewhere.
- Optionally choose subsets (latin, latin-ext, cyrillic, ...) or enter a text= string to ship only the glyphs required for a specific headline or logo.
- Copy the HTML link tags, @import rule, or CSS font-family value. Click Enable preview to see the font rendered live with your own sample text.
About this tool
Google Fonts Embed Generator builds the exact link tag, @import rule, and CSS font-family declaration you need to use any Google Font on a website. Pick one or more families from the curated list (Inter, Roboto, Open Sans, Montserrat, Poppins, Lora, Playfair Display, JetBrains Mono, and dozens more), then toggle the regular and italic weights you actually use. The tool builds a Google Fonts css2 URL that follows the strict axis-tuple grammar (ital,wght@0,400;0,700;1,400) with weights sorted ascending and italic-flag tuples in canonical order so the request never 404s. The generated link snippet includes the recommended preconnect hints to fonts.googleapis.com and fonts.gstatic.com, which together shave a full TCP and TLS round trip off the font fetch by warming up the cross-origin connection before the stylesheet arrives. font-display is configurable; swap is set by default because it eliminates the up-to-three-second flash of invisible text (FOIT) browsers otherwise produce. Optional subset filters (latin, latin-ext, cyrillic, greek, vietnamese) let you ship only the Unicode ranges your audience needs, and the text= subset option ships only the glyphs required for a specific string, which is ideal for logos and large display headings. The generated CSS examples include a sensible system fallback for each font category (system-ui for sans, Georgia for serif, ui-monospace for mono) so the browser has something usable to render while the web font downloads. An optional live preview injects the same link tag the embed code points to, so you can see the font rendering with your own sample text before pasting the snippet into your HTML. The tool runs entirely in the browser; the curated font catalog is bundled with the page so no Google Fonts API call is needed to build your URL.
Free to use. Works in your browser. No signup, no login.
Related tools
You may also like
CSS Font Stack Generator
Pick a vetted system font stack, add an optional brand font, copy CSS or Tailwind output.
Open tool
GeneratorType Scale Generator
Build a modular font size ladder with live preview and copy-ready CSS, Tailwind, and JSON.
Open tool
DeveloperCSS Formatter
Beautify minified CSS with indent, brace style, and sort options.
Open tool
GeneratorHTML Boilerplate Generator
Build a clean HTML5 starter template with meta, OG, JSON-LD, and a CSS reset.
Open tool