Google Fonts Embed Generator
Pick a family, weights and style. Get the perfect <link>, @import, and async-preload snippets — with preconnect and font-display=swap already wired.
Runs entirely in your browser — no upload, no registration.
HTML <link> (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">CSS @import
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');Async preload pattern
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" media="print" onload="this.media='all'">Use in CSS
font-family: 'Inter', sans-serif;What this tool does
Builds the CSS2-API URL for the exact axes you selected, then wraps it in the three most common embed patterns.
Why you might need it
Hand-crafted Google Fonts URLs almost always ship extra weights and skip preconnect. This tool does both correctly by default.
How to use it
- Pick family, weights and italic option.
- Choose your font-display strategy.
- Copy the snippet that fits your setup.
Always review the included licence before commercial use. Do not remove copyright records, designer names, licensing metadata or embedding restrictions from any font you process.