Google Fonts preview that never calls Google

Because this site will not load a font from someone else's server, and a specimen you cannot render is not a specimen. The content security policy is default-src 'self', so every file the page shows is one this repository carries and this domain serves; that is a real cost per family, not a link. Eight is what covers the genres a web project actually chooses between — three sans, four serif and slab, one monospace — against the 1,942 families the catalogue listed in August 2026.

No font and no stylesheet is fetched from fonts.googleapis.com or fonts.gstatic.com — the eight woff2 files come from this domain. That distinction has been legally consequential since January 2022, when the Landgericht München I awarded a plaintiff €100 in case 3 O 17493/20 because a website embedded Google Fonts dynamically and, in doing so, transmitted the visitor's IP address to Google without consent. Self-hosting removes the transfer, which is why most EU sites now bundle their fonts.

Download the family, subset it, and write the @font-face rules yourself — or let a build tool do all three. The manual route is a woff2 per subset plus a rule carrying font-display: swap and the matching unicode-range; the tooling route on Next.js is next/font, which hashes the file into your static output and rewrites the CSS to point at it. This page takes the manual route one step further and commits the eight files to its own repository, because a build that downloads a font from Google is a build that fails whenever Google is unreachable. Either way the browser makes one request to your own origin instead of two to Google's.

The two cover the same unicode range and differ in what is inside it. Space Grotesk carries a compact character set on a geometric skeleton across a 300-to-700 axis; Merriweather carries a much larger set, more complex outlines and a 300-to-900 axis, and a variable font stores an interpolation delta for every point on every outline it moves. That is why the file grows faster than the glyph count does, and why the largest family in this list costs more than four times the smallest.

Because the file only contains the axis its designer drew. Lora ships 400 to 700 and Space Grotesk 300 to 700, so asking for 900 has nothing to interpolate towards. A browser given a weight outside the axis will synthesise one by smearing the outline, which produces uneven stems and blurs the counters at text sizes, so the specimen clamps to the nearest real weight and tells you it did.

It draws the text immediately in a fallback face and repaints when the woff2 arrives, instead of leaving a blank space for up to three seconds. The reason the repaint does not shove the page around is that each family here also gets a generated fallback face with size-adjust, ascent-override and descent-override tuned to match its metrics, so the fallback occupies close to the same box. Watching the first paint on a throttled connection is a fair preview of what a visitor to your own site will see.

No — there is no upload field, and adding one would mean either sending your file somewhere or shipping a font parser this page does not need. For a local file the shortest path is a scratch HTML file with an @font-face rule pointing at it, or your operating system's font viewer. What this page is for is the opposite case: deciding between families that are already free to use before you commit one to a build.