How to compare a google font with your self-hosted version
- Step 1Get the Google-served file as A — Download the exact WOFF2 Google serves for your family/weight/subset and drop it in slot A — this is your reference, shown in red.
- Step 2Add your self-host candidate as B — Put the file you intend to self-host in slot B (shown in blue). The tool requires both; one file alone throws `Upload font B (the second font for comparison).`
- Step 3Use your real content as the sample — Replace `The quick brown fox AaBb 0123` with text representative of your site — including any accented or extended-Latin characters that distinguish the subsets.
- Step 4Run and look for fringe — An even blend means the two files render identically. Any persistent red/blue edge means a weight, style, or hinting difference; lone red glyphs mean B is missing characters A has.
- Step 5Diagnose a mismatch — If they differ, check whether you grabbed the wrong subset or weight. Use the coverage map to list missing characters, or the metadata extractor to compare family/version strings.
- Step 6Flip the source once it's clean — When the overlay is fringe-free for your content, update the `@font-face` `src` to the self-hosted path and remove the Google CDN reference with confidence.
Common Google-font-vs-self-host mismatches and how they appear
What each kind of mismatch looks like in the overlay row (A = Google file, red; B = self-host file, blue).
| Mismatch | Likely cause | How it shows in the overlay |
|---|---|---|
| Missing characters | Self-host file is a narrower subset (latin vs. latin-ext) | Red glyphs with no blue underneath |
| Different weight | Downloaded a static Regular instead of the intended weight | Even coloured fringe along every stroke |
| Different style | Got upright where you wanted italic (or vice versa) | Diverging glyph shapes, heavy fringe |
| Different revision | Older font version with reworked outlines | Subtle fringe on a few glyphs |
| Identical files | Correct download | Clean, even blend; no fringe |
Where this tool fits in the self-host workflow
The overlay is the verification step. The other steps live in sibling tools.
| Step | Tool | Output |
|---|---|---|
| Generate self-hosted CSS + download list | Google Fonts CSS generator | @font-face CSS + curl script |
| Verify the downloaded file matches the CDN font | This tool | Red/blue overlay HTML |
| List any missing characters | Coverage map | Per-block coverage report |
| Compare family/version metadata | Metadata extractor | name/OS2/head JSON |
Cookbook
Verification scenarios for the moment before you cut over from Google's CDN to a self-hosted file. Generate the self-hosted CSS with the Google Fonts CSS generator first; if a mismatch turns up, diagnose it with the metadata extractor.
Confirm the self-host WOFF2 matches the CDN WOFF2
ExampleThe core check: same family, same weight, same subset. A clean blend means you're clear to swap the source.
Font A: roboto-cdn.woff2 (from fonts.gstatic.com) Font B: roboto-selfhost.woff2 (downloaded to your /fonts) Sample text: The five boxing wizards jump quickly AaBb 0123
Catch a latin vs. latin-ext subset slip
ExampleSample the extended-Latin characters your audience uses. If B is the narrower subset, those characters show as red-only in the overlay.
Font A: opensans-cdn.woff2 Font B: opensans-selfhost.woff2 Sample text: złote řešení şehir Grüße ă ș ţ
Catch a wrong-weight download
ExampleIf you meant to self-host Medium but grabbed Regular, every stroke shows a consistent fringe.
Font A: lato-medium-cdn.woff2 Font B: lato-selfhost.woff2 (suspected Regular) Sample text: Heading weight should look identical
Verify a variable axis came through
ExampleCompare the CDN variable font with your self-host copy on a weighted string to confirm you didn't end up with a frozen static instance.
Font A: inter-var-cdn.woff2 Font B: inter-selfhost.woff2 Sample text: Variable weight — same render? AaBb
Spot-check after a font version bump
ExampleWhen Google updates a family, overlay the new CDN file against your pinned self-host copy to see whether outlines changed.
Font A: family-new-cdn.woff2 Font B: family-pinned-selfhost.woff2 Sample text: Has anything actually changed in this update?
Edge cases and what actually happens
Every row below was probed against the live API. Some documented requirements (alphabetical axis order, numerical tuple order) are not actually enforced in practice — useful to know if you've been blaming the wrong thing for a 400.
Self-host file is a narrower subset
Missing blue glyphsExtended-Latin or other characters present in the Google file but absent in your subset show as red-only in the overlay. That's your signal to re-download the correct subset before swapping the source.
You uploaded only one file
Error: Upload font BBoth the CDN file and the self-host copy are required. One file throws Upload font B (the second font for comparison). Add the second file.
Files look identical but metadata differs
Clean blend, different name tableThe overlay compares rendered glyphs, not metadata. Two files can render identically yet differ in family/version strings (common after API re-packaging). If you care about the metadata, compare it with the metadata extractor.
Wrong weight downloaded
Even fringe everywhereA uniform coloured edge along every stroke means the two files are different weights. Re-fetch the intended weight; the strokes should then blend cleanly.
Variable font frozen to static on download
Possible fringe at non-default weightsIf your self-host file is a frozen static instance and the CDN file is variable, they may match at the default weight but diverge at others. Sample text alone won't fully reveal this — confirm the axes elsewhere if weight flexibility matters.
Both files are large variable fonts
Large HTML outputEach is base64-inlined into the single preview (about +33% each). Two big variable families make a heavy file; subset to your charset first if the preview is sluggish to open.
Comparing the live CDN render by URL
Not supportedThis tool overlays two uploaded files; it can't fetch a font from a URL or render Google's live CDN delivery directly. Download the CDN file first, then overlay it.
Default pangram hides a subset gap
False all-clearThe default sample uses only basic Latin, so a missing latin-ext subset won't show. Always sample the actual extended characters your audience uses.
Identical files, as expected
Clean even blendWhen the download is correct, you get a uniform blend with no fringe across the whole sample — the green light to flip the @font-face source and drop the CDN line.
A file exceeds your tier limit
Error: exceeds per-job limitPer-file limits are 5 MB Free, 50 MB Pro, 1 GB Developer. Oversized files error before rendering.
Frequently asked questions
Can this fetch the Google font directly from the CDN?
No. It compares two font files you upload. Download the CDN-served file yourself (or generate self-hosted CSS and grab the WOFF2 via the Google Fonts CSS generator), then overlay it against your self-host copy here.
Will it tell me if the subsets differ?
Visually, yes — characters in the CDN file that your subset lacks show as red glyphs with no blue under them. For a precise list of missing characters, use the coverage map.
How do I see a weight mismatch?
A wrong-weight self-host file shows a consistent coloured fringe along every stroke in the overlay row, whereas a correct match blends cleanly.
Does it compare the font's metadata or version?
No — it compares rendered glyphs only. Two files can render the same and still differ in family/version strings. Use the metadata extractor to compare those.
What's the safest sample text for this check?
Your real content, including any extended-Latin or special characters your audience uses. The default basic-Latin pangram can hide a subset mismatch.
Do I need the same format on both sides?
No. You can overlay a WOFF2 against a TTF or any combination of TTF/OTF/WOFF/WOFF2.
Is this a substitute for generating the self-hosted CSS?
No — it's the verification step. Generate the self-hosted @font-face and the download list with the Google Fonts CSS generator, then verify the file here.
Can I prove to my team the swap is identical?
Yes — save the HTML overlay (both fonts inlined) and attach it to the migration ticket as visual evidence the self-hosted file matches.
Why 32px for both?
A fixed size forces both files into the same coordinate frame so identical files blend perfectly and any difference stands out as fringe.
What if my self-host file is a variable font and the CDN one is static (or vice versa)?
They may match at the default weight and diverge elsewhere. The overlay shows the default render; if weight flexibility matters, verify the axes with a variable-font inspector.
What tier do I need and how big can files be?
Pro tier; per-file limits are 50 MB on Pro and 1 GB on Developer, checked separately for each file.
Does it modify either font?
No. It only renders both for comparison. The output is an HTML overlay, not a modified or re-encoded font.
Privacy first
Every JAD Font tool runs entirely in your browser using opentype.js and the wawoff2 WASM Brotli encoder. Your fonts never leave your device — verified by zero outbound network requests during processing.