# Fonts > Test and compare typefaces: system fonts, Google Fonts and your own web fonts via CSS URL — with a specimen, a glyph table and a clamp() calculator. Source: https://www.jpkc.com/db/en/tools/fonts/ ## Try a typeface before you commit to it The [Fonts](https://www.jpkc.com/tools/fonts/) tester answers a question that comes up in every project: how does *this* typeface actually look in *my* text — at every size, in every weight, with every character I need? Instead of wiring a font into your build and only then noticing that the figures look restless or the eszett is missing, you check it up front: live in the browser, against your own sample text. You pick a typeface from one of three sources — the **system fonts**, more than a thousand **Google Fonts**, or your **own web font** via a CSS URL — click **Display Font**, and the preview renders it instantly. Four views show the same font from different angles: a classic specimen across all sizes, an editable magazine layout, a full glyph table, and a calculator for fluid font sizes. It is built for everyone who works with type: **designers** comparing typefaces and weights; **developers** who want to check glyph coverage and available weights before embedding a font; and anyone who needs a clean `clamp()` font size for a responsive layout. Everything runs in the browser — no account, no installation. ## Three ways to a typeface - **Base Fonts** — a dropdown of around 40 system and web-safe families, from generic groups (`sans-serif`, `serif`, `monospace`, `cursive`) through classics like Arial, Georgia, Verdana and Times New Roman to modern system-UI stacks (`-apple-system`, `Segoe UI`, `Roboto`, `Ubuntu`). Perfect for seeing what is already available on most devices without downloading any web font at all. - **Google Fonts** — a dropdown of over a thousand typefaces from the Google Fonts library, each with a version number. Pick one and the preview loads it directly, enabling exactly the weights and styles that font actually ships. - **Custom CSS File** — a field for the URL of a stylesheet that already hosts your font (a Google CSS URL, an Adobe Typekit link, a Bunny Fonts URL, your own CDN) plus a **Font Family Name** field for the family name. This lets you test any web font that exists somewhere as an `@font-face` stylesheet. For each typeface you choose a weight from 100 to 900 — normal or italic — in the **Weight / Style** bar. The manual covers all three sources, the weight picker and every preview in detail. ## Four views of the same typeface - **Specimen** — the classic type sample: a large "AaBbCc", the full alphabet with figures and punctuation, and a table of the same text in 20 sizes from 8 to 96 px. Every row is editable, so you can type your own text. - **Editable Sample Layout** — a complete magazine layout of headings, body copy, a pull quote, lists and cards, rendered in the chosen font and editable in place via a built-in inline editor. This shows the typeface in a realistic reading context, not just as a sample alphabet. - **Glyphs** — a table of every glyph, from ASCII through the extended Latin characters to special symbols, dashes, quotation marks and ligatures. At a glance you see whether a typeface carries the accents, the euro sign or the figures your project needs. - **Clamp() Calculator** — a fluid-typography helper: you enter a minimum and maximum size plus a viewport range and get a ready-made `clamp()` line that interpolates the font size smoothly between small and large screens — with code examples for CSS, SCSS and Tailwind. ## Where the fonts come from — and what that means for privacy The tool runs in the browser, but two points matter for privacy: - **Google Fonts are loaded live from Google.** As soon as you display a Google typeface, your browser pulls its stylesheet and font files **straight from Google's servers** (`fonts.googleapis.com` and `fonts.gstatic.com`). Google sees your IP address in the process — the same mechanism that makes embedding Google Fonts directly on a website a GDPR concern. For a quick preview that is harmless; for production, the usual advice is to self-host your web fonts. - **Your own CSS URLs go to their provider.** A stylesheet URL entered in the *Custom CSS File* field is likewise loaded straight from your browser, so the provider (Adobe, Bunny, your CDN) receives a request. The Google Fonts list itself is prepared and cached server-side; only the actual font files come directly from Google when you display them. The manual has the details. ## Try it now **[→ Open Fonts](https://www.jpkc.com/tools/fonts/)** — pick a typeface, click *Display Font*, page through the four tabs. No account, free, right in the browser. ## Related JPKCom tools - **[Colors](https://www.jpkc.com/db/en/tools/colors/)** — find the palette that fits your type: typeface and colour are the pair that sets the tone of a design. - **[SEO & GEO Analyzer](https://www.jpkc.com/db/en/tools/seo/)** — check how embedded web fonts affect load time and render-blocking resources. --- There is more on the sub-pages: the **[Manual](https://www.jpkc.com/db/en/tools/fonts/manual/)** with every source, tab and option in detail, real-world **[Examples](https://www.jpkc.com/db/en/tools/fonts/examples/)**, and collected **[Tips & Tricks](https://www.jpkc.com/db/en/tools/fonts/tips/)**.