Google Fonts Previewer — Free Online Font Comparison Tool
Compare Google Fonts side-by-side with custom preview text. Adjust size, weight, spacing, and more. Your preview text stays in your browser; the font files load from Google's CDN.
What is Google Fonts? Google Fonts is a free library of open-source typefaces served from
Google's CDN. A page uses one by linking to the CSS API — for example
fonts.googleapis.com/css2?family=Inter:wght@400&display=swap — which returns
@font-face rules pointing at WOFF2 files. Most families are licensed under the SIL Open Font License,
with a few under Apache 2.0 or the Ubuntu Font Licence, so all are free for commercial work.
How to Use the Google Fonts Previewer
- Narrow the list by category — The filter buttons cut the built-in list of 100 families down to serif, sans-serif, display, handwriting or monospace, which is usually the first decision to make.
- Choose a heading font and a body font — The two dropdowns feed the left and right preview panels, so you are always testing a pairing rather than a single face in isolation.
- Paste the text you will actually set — Pangrams flatter every typeface. Real headlines, real product names and real numerals expose tight letterfits, ambiguous 1/l/I shapes and awkward figure widths.
- Tune size, weight, tracking and leading — Size runs 12-72px, weight 100-900 in hundreds, letter spacing -2 to 10px and line height 0.8 to 2.5. Set them to the values your design actually uses before judging the pair.
- Flip the background — Toggle Dark/Light re-renders both panels on the opposite background. Light strokes on dark look thicker, so a weight that reads well in one theme often needs adjusting in the other.
-
Copy the link tag and the CSS — The output block contains a ready
<link>for the CSS API plus.font-headingand.font-bodyrules carrying every control value you set.
How Google Fonts Loading Actually Works
Nothing about a web font is magic — it is one stylesheet request followed by one or more binary font downloads.
When you add the link tag, the browser fetches a small CSS file from fonts.googleapis.com. That file
contains no font data; it is a set of @font-face rules whose src points at WOFF2 files on
fonts.gstatic.com. Only when an element on the page actually needs one of those faces does the browser
download the binary. This is why two network hosts are involved, and why adding
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> measurably shortens the
critical path.
The stylesheet Google returns is split by writing system. Each subset — latin, latin-ext, cyrillic, greek,
vietnamese and so on — gets its own @font-face block with a unicode-range descriptor
listing the code points it covers. The browser reads those ranges, compares them against the characters your page
renders, and downloads only the files it needs. An English page therefore never fetches the Cyrillic file even
though the rule for it is present, which is why manual subsetting is rarely necessary with the v2 API.
CSS API v2 URL Parameters
| Parameter | What it does | Example |
|---|---|---|
family | Family name with + for spaces; repeat it for more families | family=Playfair+Display |
:wght@ | One or more static weights, separated by semicolons | :wght@400;700 |
:wght@a..b | A continuous range, served as a variable font when the family has one | :wght@300..800 |
:ital,wght@ | Axis tuples; 0 is upright and 1 is italic, listed in axis order | :ital,wght@0,400;1,400 |
display | Sets the font-display descriptor in the returned rules | display=swap |
text | Returns a file containing only the characters given — useful for a single headline | text=Hello |
The preview here requests every weight from 100 to 900 so the weight slider responds instantly, while the link tag
it writes for you requests only the single weight you settled on. Add more weights yourself by extending the
wght@ list with semicolons — each additional static weight is another file, so ask for the two or
three you genuinely use rather than the whole range.
What font-display Controls
Every font download has a gap between the request and the first painted glyph. font-display decides
what the user sees during that gap. It defines a short block period, during which text is drawn
invisibly, followed by a swap period, during which the fallback is shown and will still be replaced when
the web font arrives. The timings below are the values the CSS Fonts specification recommends; individual browsers
may differ.
| Value | Block period | Swap period | Effect |
|---|---|---|---|
block | ~3s | Infinite | Invisible text until the font arrives |
swap | ~100ms | Infinite | Fallback shows immediately, then swaps — the Google default |
fallback | ~100ms | ~3s | Late arrivals are ignored until the next page load |
optional | ~100ms | None | Browser may skip the font entirely on a slow connection |
auto | Browser choice | Browser choice | Usually behaves like block |
swap avoids invisible text but produces a visible reflow when the real font lands. The size of that
jump depends on how closely your fallback matches the web font's metrics, which is why choosing a sensible
fallback in the font-family list — and, if you need it, tuning
size-adjust on a local @font-face — matters as much as the display value itself.
Choosing a Pairing That Holds Up
Two fonts work together when they are clearly different but share underlying proportions. The usual failure is picking two faces that are almost the same — two humanist sans-serifs, say — which reads as a mistake rather than a decision. Aim for contrast in one dimension and agreement in the others: a high-contrast serif heading over a neutral sans body works because the structures differ sharply while the x-heights and widths stay compatible.
X-height is the measurement to check first. Set both fonts at the same pixel size in the preview; if one looks noticeably larger, its x-height is taller, and you will need different sizes to make them look balanced. The second check is the numerals — many display faces ship with old-style figures that sit below the baseline, which looks wrong in a price, a table or a phone number. The third is the weight range: a family that only offers 400 and 700 will be synthesised into a fake 600 by the browser, and synthetic weights look smeared.
Restraint pays off. Two families and three or four weights covers almost any interface, and each extra weight is a
separate download. Where a family offers a variable version, requesting a range such as
wght@300..800 gives you every weight in between from a single file, which is usually smaller than
three static weights. Set your body size and line height before you judge anything else — most pairings that look
wrong at 24px with 1.5 leading look fine at the 16px and 1.6 they will actually ship at.
- One stylesheet request plus one WOFF2 file per needed subset and weight.
unicode-rangemeans unused writing systems are never downloaded.display=swaptrades a layout shift for never showing invisible text.- Match x-heights, check the numerals, and avoid weights the family does not ship.
- A variable range often costs less than three static weights.
Frequently Asked Questions
Copy the link tag from the CSS output and paste it into your document's <head>, as early as you can. Then apply the family in CSS with font-family: 'Inter', sans-serif. Always keep a generic fallback at the end of the list so text still renders if the request fails. For a measurable improvement, add <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> above the stylesheet link so the connection to the font host is opened in parallel.
Yes. Every family in the library is open source. The large majority are released under the SIL Open Font License, with a smaller number under the Apache License 2.0 or the Ubuntu Font Licence. All three permit commercial use, embedding in websites and apps, and use in print. The OFL does restrict selling the font files on their own and requires that any modified version be released under the same license — check the specific family's license page if you intend to modify or redistribute it.
They add work: a DNS lookup and TLS handshake to fonts.googleapis.com, then a second connection to fonts.gstatic.com for the files, and the font request is discovered only after the CSS parses. The practical fixes are preconnecting to the font host, requesting only the weights you use, and keeping to two families. Self-hosting the WOFF2 files removes the extra hosts entirely and is the fastest option if you can manage the files.
No. Your text stays in the page and is only assigned to DOM elements locally. The fonts themselves are a different matter — to render them, your browser must request the stylesheet and the WOFF2 files from Google's servers, which means Google's CDN sees the usual request metadata such as your IP address and user agent. That is inherent to using a hosted font service, here or on any site that links to one.
Self-hosting removes the third-party request, so no visitor IP address is disclosed to Google's CDN and you control caching and versioning. That matters to operators who need to keep all subresource requests first-party, a point that has been raised in European data-protection discussions. The cost is that you take on downloading the files, generating the @font-face rules and updating them when a family is revised. This is a technical note, not legal advice — check with whoever handles privacy compliance for your site.
A static weight is one file per weight: asking for 400 and 700 downloads two files. A variable font stores the whole weight axis in a single file and interpolates between the extremes, so wght@300..800 gives you every value in that range from one download and lets you animate weight smoothly. Not every family has a variable version; when one does, the range syntax in the URL is what requests it.
It mirrors the weight slider, so the tag reflects exactly what you previewed. To request more, extend the axis list with semicolons — :wght@400;600;700 — or switch to a range such as :wght@400..700 for a variable family. The preview panels themselves always load the full 100-900 set so the slider stays responsive; the tag is deliberately narrower than that.
Four usual causes. The family name in your CSS does not exactly match the one in the link tag, so the fallback renders instead. The weight you set was never requested, so the browser fakes it by smearing the outlines. A Content Security Policy blocks fonts.googleapis.com or fonts.gstatic.com, which shows up as failed requests in the network panel. Or the font simply has not loaded yet and you are seeing the swap fallback mid-flight.
Use Cases
Settling a Heading and Body Pairing
Load the candidate heading face on one side and the body face on the other, set both to your real sizes, and pick the pair that still works at 16px.
Checking a Face at Caption Size
Many display and handwriting fonts fall apart below 14px. Drag the size slider down to the smallest label in your design before committing.
Finding a Free Substitute for a Licensed Face
When a brand typeface cannot be licensed for the web, filter by category and compare candidates against the same headline until the proportions match.
Confirming a Family Ships the Weight You Want
Step the weight slider through 100 to 900. If a value looks identical to its neighbour, the family lacks it and the browser is faking the bold.
Testing Type on a Dark Theme
Light strokes on a dark background optically thicken. Flip the preview background to see whether your body weight needs dropping a step for dark mode.