# Fonts — Examples > Hands-on runs with the Fonts tester: compare two Google Fonts, test your own web font, check glyph coverage and build a clamp() font size. Source: https://www.jpkc.com/db/en/tools/fonts/examples/ Back to the overview: [Fonts](https://www.jpkc.com/db/en/tools/fonts/) · Open the tool: [www.jpkc.com/tools/fonts/](https://www.jpkc.com/tools/fonts/) The [Manual](https://www.jpkc.com/db/en/tools/fonts/manual/) explains every source, tab and option in detail. This page adds **concrete workflows**: typical tasks, walked through step by step. The interface is in English, so labels appear as they do on screen. ## Example 1: Compare two Google Fonts side by side You are torn between two typefaces and want to see which suits your text better. The tool has no fixed split screen — you compare by loading them one after the other and judging the same view twice. 1. Open the [tester](https://www.jpkc.com/tools/fonts/), pick the first typeface in the **Google Fonts** dropdown (e.g. "Inter") and click **Display Font**. 2. Go to the **Specimen** tab, click into one of the editable rows and type your real text — your page heading, say. That way you judge the font on your content, not on "AaBbCc". 3. Note the result (or take a screenshot), then pick the second typeface in the dropdown (e.g. "Source Sans 3") and click **Display Font** again. Your typed text stays — you now see it in the new font. 4. **Tip for a true parallel comparison:** open the tool in two browser tabs, load one typeface in each and type the same text. Then flip between them by switching tabs. When comparing, look past the overall impression to the details that only show up in running text: the legibility of small sizes, the shape of the figures, and how calm the text feels at paragraph length — that is what the next step, the [Editable Sample Layout](#example-4-judge-a-typeface-in-a-real-layout), is for. ## Example 2: Preview your own web font via its CSS URL You have a licensed font from a provider (Adobe Fonts, Bunny Fonts) or your own `@font-face` stylesheet on a CDN, and you want to check it before embedding. First, the key point: the tool does **not** take an uploaded font file — it takes the **URL of a stylesheet** that already embeds the font. 1. Copy your font's stylesheet URL — the exact address you would otherwise put in a `` in the `` (e.g. a `https://fonts.bunny.net/css?family=…` URL). 2. Paste it into the **Custom CSS File** field. 3. Enter the exact family name the stylesheet defines into the **Font Family Name** field (e.g. "Cabinet Grotesk"). Without that name the tool does not know which `font-family` to apply. 4. Click **Display Font**. The preview adds the stylesheet and renders your text in the font. All weight buttons are active — pick the cut you actually licensed. If your font only exists as a local `.woff2` file, upload it to reachable hosting first and point to its CSS — a bare file from your desktop cannot be loaded by the tool. ## Example 3: Check glyph coverage for accents and symbols A pretty typeface is no use if it lacks the eszett or its euro sign falls out of line. That is exactly what you check in the **Glyphs** tab before you commit. 1. Load your candidate typeface (from any source) and click **Display Font**. 2. Switch to the **Glyphs** tab. You see a grid of every character, each cell with an entity number and a rendered glyph. 3. **Walk through the characters your project needs.** For multilingual or German content, that means the umlauts (ä, ö, ü, Ä, Ö, Ü), the eszett (ß), the typographic quotation marks (“ ” ‚ ‘) and the euro sign (€). In the grid you find them in the extended Latin block and among the punctuation. 4. **Watch for empty or substituted cells.** If a character is missing from the font, its cell stays empty or shows a notdef glyph — a clear sign the typeface is not complete for your language. With decorative or very young Google Fonts this pays off: many cover the basic alphabet but fall short on ligatures, dashes or special characters. ## Example 4: Judge a typeface in a real layout Almost any typeface looks good as a sample alphabet. Whether it holds up in running text is what the **Editable Sample Layout** shows. 1. Load your typeface and click **Display Font**. 2. Open the **Editable Sample Layout** tab. The chosen font renders a full magazine layout: headings, multi-column text, a quote, a list and cards. 3. **Replace the placeholder text with real content.** The layout is editable through the built-in inline editor — click into a heading or paragraph and write your own text. That lets you judge legibility, line spacing and how bold, italic and hierarchy levels interact in a realistic context. 4. Check the spots where weak typefaces give themselves away: long paragraphs at reading size, the contrast between heading and body, and how clearly emphasis (bold/italic) stands out. This view complements the [Specimen](https://www.jpkc.com/db/en/tools/fonts/manual/#specimen) tab: the specimen tests sizes and characters, the sample layout tests reading flow. ## Example 5: Build fluid typography with the clamp() calculator You want a heading that is not too big on a phone and not too small on a desktop — without half a dozen media queries. That is what the **Clamp() Calculator** is for. 1. Open the **Clamp() Calculator** tab. 2. For a quick start, click a **Type Scale Preset**, e.g. **H1** — that sets Min/Max to 2 rem and 3.5 rem. Or enter your own values in **Min Value** and **Max Value**. 3. Set the **viewport range** to interpolate over — default 320 px (small phone) to 1440 px (large desktop). 4. **Read the result.** The *clamp() Value* field holds the finished expression, e.g. `clamp(2rem, 1.571rem + 2.143vw, 3.5rem)`. Below it sits the full `font-size: …;` line. Both can be copied with a click. 5. **Watch the live preview.** The preview text scales with your window; the readout shows the current viewport width and the resulting size. Drag the browser window narrower and wider to see the font grow. 6. If you need the value not as raw CSS but as a variable, mixin or utility class, open the **Code Examples** accordion: it gives the same value as a CSS custom property, an SCSS mixin and a Tailwind class. In under a minute you have a clean, cross-device font size — and you can see at once whether the span between min and max is sensibly chosen. --- Go deeper: the [overview](https://www.jpkc.com/db/en/tools/fonts/) for the big picture, the [Manual](https://www.jpkc.com/db/en/tools/fonts/manual/) for every option in detail, and the [Tips & Tricks](https://www.jpkc.com/db/en/tools/fonts/tips/) for tricks and pitfalls. You can try everything directly in the [tool](https://www.jpkc.com/tools/fonts/).