# Fonts — Manual > Complete reference for the Fonts tester: the three font sources, the weight picker, all four preview tabs, the clamp() calculator and the privacy architecture. Source: https://www.jpkc.com/db/en/tools/fonts/manual/ 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/) This manual covers the **Fonts** tester in full: how to load a typeface from the three sources, how to choose weight and style, what each of the four preview tabs shows, and how the `clamp()` calculator works. The tool's interface is in English, so the control labels here match what you see on screen. ## Flow: pick a typeface, display it, set a weight The basic flow is always the same: 1. **Choose a typeface from one of the three sources** (Base Fonts, Google Fonts or Custom CSS File). Each choice sets the mode internally and clears the other fields — so exactly one source is active at a time. 2. **Click the `Display Font` button.** Only this click applies the font to the preview. A short toast confirms the loaded typeface ("Font … loaded"). 3. **Pick a cut in the `Weight / Style` bar** — from 100 to 900, normal or italic. 4. **Page through the preview tabs** (Specimen, Editable Sample Layout, Glyphs, Clamp() Calculator). ### Base Fonts The **Base Fonts** dropdown ("Choose a base font family…") lists around 40 system and web-safe families, sorted alphabetically. These include the generic groups (`sans-serif`, `serif`, `monospace`, `cursive`), classic web-safe faces (Arial, Helvetica, Helvetica Neue, Times New Roman, Times, Courier New, Georgia, Verdana, Tahoma, Trebuchet MS, Comic Sans MS, Impact, Arial Black, Palatino, Garamond, Book Antiqua, the Lucida variants, Consolas, Menlo, Monaco …) and modern system-UI stacks (`-apple-system`, `BlinkMacSystemFont`, `Segoe UI`, `Roboto`, `Oxygen-Sans`, `Ubuntu`, `Cantarell`). These fonts download nothing — they are what devices already have. That makes them a fast reference point: this is how your text looks without any web font at all. ### Google Fonts The **Google Fonts** dropdown ("Choose from Google Fonts…") holds over a thousand typefaces from the Google Fonts library, each listed as "Family (version)". The list itself is fetched **server-side** from the Google Fonts API and cached for 30 days — so selecting from the dropdown does not cause a Google request. Only when you display a font does your preview load its stylesheet and font files **directly from Google** (see [Architecture and privacy](#architecture-and-privacy)). A Google selection has two quirks: you never type a URL — the tool builds the stylesheet address from the font's stored data. And the `Weight / Style` bar automatically enables **only the cuts that font actually ships** — the disabled buttons tell you at a glance which weights are missing. ### Custom CSS File **Custom CSS File** is how you test your own web font. Important: this is **not a file upload**. You paste the **URL of an already-hosted stylesheet** into the field — a Google CSS URL, an Adobe Typekit link, a Bunny Fonts URL, or the `@font-face` stylesheet of your own CDN. In the second field, **Font Family Name**, you enter the family name (e.g. "Droid Sans") so the tool knows which `font-family` to apply once it has loaded. With `Display Font`, the stylesheet is added as a `` and the named family is applied to the preview. As with base fonts, all weight buttons are active here — the browser synthesises missing cuts when needed. > **A note on "custom font files":** the tool's marketing line mentions "custom font files". In practice you do not upload a local `.woff2`/`.ttf`; you point to a stylesheet that already embeds the font via `@font-face`. If your font only exists as a local file, you first have to make it reachable (your own CDN, hosting) and enter its CSS URL here. ## Weight / Style — the cut picker The `Weight / Style` bar offers 18 buttons: the weights **100, 200, 300, 400, 500, 600, 700, 800, 900** — each once normal and once italic (weight 400 appears as "regular", the default italic as "italic"). Each button is itself set in its weight, so the gradation is visible in the labels. - For **Google Fonts**, only the cuts the chosen font really has are active; the rest are greyed out. - For **Base Fonts** and **Custom CSS File**, all cuts are active — whether a cut truly exists or is synthesised by the browser depends on the font. Clicking a cut sets `font-weight` and `font-style` on every preview element, so you can step through one typeface's weights with ease. ## The preview tabs in detail ### Specimen The classic type sample. "AaBbCc" sits at the top in 72 px; below it, the full alphabet (upper and lower case), the figures and a set of punctuation marks at 30 px. Then comes a table showing the same character set in **20 sizes**: 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 20, 24, 30, 36, 48, 60, 72, 90 and 96 px. Every row is `contenteditable` — click in and replace the sample text with your own, say a real heading or a brand name, to judge the font on real text. ### Editable Sample Layout Here you see the typeface not as a sample alphabet but in a **complete magazine layout**: headings (h1–h3), multi-column body copy, a pull quote, a list, an info card and links. The layout is directly editable through a built-in **inline editor (TinyMCE 8)** — you can swap text, format it and simulate your own layout. This view shows what a plain specimen cannot: how the typeface behaves in real reading flow, in a mix of bold and italic, across several hierarchy levels. ### Glyphs A grid of **every glyph** in the font. Each cell names the HTML entity number and renders the character below it. Covered are: - **ASCII** (characters 32–126): letters, figures, punctuation and symbols. - **Extended Latin** (160–255): umlauts, accented letters, currency and special signs such as ©, ®, °, µ, ¿. - **Special characters**: Œ, œ, Ÿ and the accent modifiers ˆ and ˜. - **Spaces**: various typographic spaces (en/em space, thin space …). - **Dashes**: hyphen, non-breaking hyphen, figure dash, en dash and em dash (‐ ‑ ‒ – —). - **Quotation marks**: ‘ ’ ‚ „ “ ” and the French ‹ ›. - **Punctuation and symbols**: bullet •, ellipsis …, euro €, trademark ™, filled square ◼. - **Ligatures**: fi and fl. This view is the practical test for glyph coverage: if a font lacks a character, its cell stays empty or shows a fallback glyph. For multilingual work it is worth scanning the accents, the euro sign and the typographic quotation marks specifically. ### Clamp() Calculator A calculator for **fluid typography**. Instead of setting a fixed font size at each breakpoint, a `clamp()` function gives a size that grows linearly with the viewport width between a minimum and a maximum. The calculator does the maths for you. **Inputs:** - **Unit** — the unit of the target values: `px`, `rem` or `em` (default `rem`). - **Base Font Size (px)** — the reference for the rem conversion (default 16). - **Min Value** / **Max Value** — the smallest and largest font size you want (default 1 and 2.75 rem). - **Min Viewport (px)** / **Max Viewport (px)** — the viewport range over which it interpolates (default 320 and 1440). **Type Scale Presets** fill Min/Max with a typical step value (all in rem): **Small** (1 → 1.125), **Body** (1 → 1.25), **H4** (1.125 → 1.5), **H3** (1.25 → 1.75), **H2** (1.5 → 2.25), **H1** (2 → 3.5), **Display** (2.5 → 5). **Outputs:** a ready `clamp(min, intercept + slopevw, max)` expression and the full `font-size: …;` line, both copyable and editable. A **live preview** renders the text at the computed size and shows the current viewport width together with the resulting px/rem size — shrink the window and you see the font grow in real time. A **Code Examples** accordion gives the same value in four forms: plain CSS, CSS custom properties (`--font-size-fluid`), an SCSS `fluid-type` mixin, and a Tailwind arbitrary-value class (`text-[clamp(...)]`). ## Architecture and privacy At its core the tool is **client-side**: font selection, preview, glyph table and the `clamp()` calculator all run entirely in your browser. Two points matter for privacy: - **The Google Fonts list** is fetched server-side via the Google Fonts API and cached for 30 days. Filling the dropdown therefore causes no Google request from your browser. - **The font files**, however, are loaded by your browser **directly from Google** when you display them (`fonts.googleapis.com` → `fonts.gstatic.com`). Google receives your IP address in the process — exactly the mechanism that makes embedding un-hosted Google Fonts on production sites a GDPR concern. For a preview this is harmless; for live use, the advice remains to self-host web fonts. - **Your own CSS URLs** (Custom CSS File) are loaded straight from your browser too — the provider receives a request carrying your IP. So that custom stylesheets and font files can load at all, the tool deliberately relaxes its Content Security Policy for style and font sources over HTTPS. Embedded CSS still cannot execute scripts. ## Extras At the foot of the page the tool links the external font editor **Glyphr Studio** ("Start Glyphr Studio font editor…") — handy when, after testing, you want not just to view a typeface but to edit or draw one. For the introduction and the big picture, see the [overview page](https://www.jpkc.com/db/en/tools/fonts/). Concrete workflows are in the [Examples](https://www.jpkc.com/db/en/tools/fonts/examples/); collected tricks in [Tips & Tricks](https://www.jpkc.com/db/en/tools/fonts/tips/). You can try everything directly in the [tool](https://www.jpkc.com/tools/fonts/).