JPKCom DB

Fonts — Manual

Complete reference for the Fonts tester: four font sources, slots A/B, the weight picker, all five preview tabs, the clamp() calculator, type scale and privacy.

Back to the overview: Fonts · Open the tool: www.jpkc.com/tools/fonts/

This manual covers the Fonts tester in full: how to load a typeface from the four sources, how the two slots A and B work together, how to choose weight and style, what each of the five preview tabs shows, and how the clamp() calculator and its type scale work. The tool's interface is in English, so the control labels here match what you see on screen.

Flow: pick a slot, load a typeface, set a weight

The basic flow is always the same:

  1. Pick the slot. In the top right of the Font Selection card you switch between Font A and Font B (compare). Font A is the main font and appears in every preview; you only need Font B for the side-by-side view in the Compare A / B tab. Font A is selected by default.
  2. Load a typeface from one of the four sources — via the Google Fonts, System, Font file and Stylesheet URL tabs. There is no separate "display" button: a click in the Google list, a choice in the system picker, a dropped file or Load stylesheet applies the font to the active slot right away.
  3. Check the status. Below the tabs, both slots are listed with font name, source and load state — "loading…", "loaded" or "installed on this device", for instance. The tool only reports "loaded" once the browser can actually render the font (document.fonts). If that does not happen within 10 seconds, the line reads "did not load within 10 s"; if the browser finds no font under that name, "the browser found no font named …".
  4. Pick a cut in the Weight / style bar — from 100 to 900, normal or italic.
  5. Page through the preview tabs (Specimen, Editable Sample Layout, Glyphs, Compare A / B, Clamp() Calculator).

You can mix sources freely: Font A can be a Google font, Font B a local file or a system font.

Google Fonts

The Google Fonts tab shows the entire Google Fonts library — currently close to 2,000 families — as a searchable list:

  • Search filters by family name. With several words, all of them must appear in the name (open sans, mono); fonts whose name starts with the first word come first, the rest follow alphabetically.
  • Category narrows the list to one class: All, Sans serif, Serif, Display, Handwriting or Monospace.
  • Each entry shows its category and number of styles on the right (e.g. "sans-serif · 18 styles").
  • The list renders matches in batches of 100. Scroll to the end and it appends the next batch; from the keyboard you get the same via the Show more (… left) entry. Below the list, a counter tells you how many matches are visible and how many there are in total.

Clicking a font loads it through Google's css2 API — with exactly the styles it ships and display=swap. As a fallback, the tool appends a generic family that matches the category (cursive for Handwriting, monospace for Monospace and so on). If the font sits in slot A, the Weight / style bar then enables only the cuts that font actually has; a Google font in slot B leaves the bar unchanged.

The list itself comes from the tool's own server, not from Google (see Architecture and privacy). Only loading a font connects your browser to Google — which the note below the list points out as well.

System

The System tab holds the System font picker with 51 entries:

  • Generic families (marked "(generic)"): sans-serif, serif, monospace, cursive, fantasy, system-ui, ui-monospace, ui-serif, ui-rounded. They always work — which actual font sits behind them is up to the browser.
  • Common system fonts from Windows, macOS and Linux, including Arial, Arial Black, Calibri, Cambria, Consolas, Courier New, DejaVu Sans, Garamond, Georgia, Helvetica, Helvetica Neue, Impact, Liberation Sans, Lucida Grande, Menlo, Monaco, Noto Sans, Palatino, Roboto, Segoe UI, SF Pro Text, Tahoma, Times New Roman, Trebuchet MS, Ubuntu and Verdana.

While filling the list, the tool checks for every font whether it is installed on your device: it measures a test string in that font and in three generic fallbacks and compares the widths. Missing fonts are listed with "— not installed". If you pick one anyway, the status warns "not installed on this device — a fallback font is shown" — what you see then is not the font but the browser's substitute. System fonts are not downloaded; they show how your text looks without any web font at all.

Font file

The Font file tab lets you test font files straight from your computer:

  • Drag one or more files onto the drop zone ("Drop TTF, OTF, WOFF or WOFF2 files here") or select them via Choose files.
  • Accepted extensions are .ttf, .otf, .woff and .woff2, up to 20 MB per file. Anything else is rejected with a message, as are files the browser cannot read as a font.
  • The file is read in the browser through the FontFace API — it is not uploaded and never leaves your machine.
  • The first file of a drop goes straight into the active slot, with the status "loaded from file". Every loaded file also appears as an entry in a list below the drop zone; clicking it puts that file into whichever slot is active. That is how you place two weights or two versions of a typeface on A and B one after the other.
  • Internally the tool registers the font under the family name "Local" plus the file name (Inter-Bold.woff2 becomes "Local Inter-Bold"); the status shows the file name.

Nothing is stored: after a page reload you have to select the files again.

Stylesheet URL

Stylesheet URL lets you test any web font that lives somewhere as an @font-face stylesheet — Adobe Fonts/Typekit, Bunny Fonts, Fontshare or your own CDN's CSS.

  1. Enter the address in Stylesheet URL (https). Only https:// addresses are accepted; an http:// URL is rejected with "Only https:// stylesheets can be loaded here."
  2. You can leave the Font family name field empty.
  3. Click Load stylesheet or press Enter in the URL field.

The tool first includes the stylesheet with CORS. If the server permits it, the tool reads every font-family name from the @font-face rules, offers them as suggestions in the Font family name field and, if that field is empty, applies the first family automatically. If the stylesheet defines several families, the status names the others ("the stylesheet also defines …"). If the server sends no CORS headers, the tool loads the stylesheet a second time without CORS — the fonts are usable, but their names cannot be read. The status then reports "loaded — enter the font family name …": type the name in by hand and click Load stylesheet again.

If the font sits in slot A, all weight buttons are active, as with System and Font file, because the tool does not know which cuts the stylesheet provides.

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 (labelled "400" and "400i"). 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 System, Font file and Stylesheet URL, all cuts are active — whether a cut truly exists depends on the font. The tool registers a local file as a single cut with weight 400. If a cut is missing, the browser falls back to the nearest available one; only bold and italic does it generate artificially.
  • What decides which buttons are enabled is Font A. When you change Font A, the tool resets the selection.

Clicking a cut sets font-weight and font-style on every single element of the preview areas that is set in Font A, on the calculator's live preview and on both columns of the Compare A / B tab. That lets you step through one typeface's weights with ease — or compare two typefaces in the same weight. Because the cut hits every element, headings and bold or italic emphasis lose their own styling too. To judge the mix of weights, leave the bar unset; it is only reset when you choose Font A again.

The preview tabs in detail

Every tab except Compare A / B shows Font A. Until you pick a font, you see the page's default font.

Specimen

The classic type sample. At the top, set in 72 px, is the name of the chosen font ("AaBbCc" before your first pick); 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 editable right in the browser: the whole area is a contenteditable region — click into it and replace the placeholder text with your own. There is no formatting toolbar, and none is needed here: bold, italic and the hierarchy levels are already part of the sample layout, you simply swap the text inside it. Clicks on the sample links are intercepted so that editing does not accidentally jump you out of the 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 — as long as no cut is selected in the Weight / style bar, since that cut would apply to every element and flatten the mix.

Glyphs

A grid of the glyphs most often needed in Western European text. 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 single guillemets ‹ ›.
  • 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, the browser switches to a fallback font for it or shows a replacement glyph — and the cell visibly breaks ranks. For multilingual work it is worth scanning the accents, the euro sign and the typographic quotation marks specifically.

Compare A / B

The comparison tab puts Font A and Font B side by side:

  • Sample text — your own sample text for both columns, preset to "The quick brown fox jumps over the lazy dog — Äpfel, Öl & Übermut 0123456789". Whatever you type shows up in both fonts at once.
  • Size — a slider from 10 to 120 px (default 32 px) for the size of the sample text.
  • Two cards, A and B, show the sample text, each with the font's name in its header. As long as Font B is empty, the header reads "choose “Font B” above" and the column shows the default font.
  • Below them, the Paragraph card sets a fixed paragraph of body copy in both fonts side by side — this is where texture, letter spacing and reading flow show.

A cut chosen in the Weight / style bar applies to both columns. The buttons follow Font A, though — if Font B lacks a cut, the browser shows the nearest available one there or, for bold and italic, an artificially generated one.

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 — or shrinks — linearly with the viewport width between two widths and stays at the respective limit outside them. The calculator does the maths for you.

Inputs (Target Values card):

  • Unit — the unit of the sizes you enter: px, rem or em (default rem). The tool converts em like rem, via the root font size; it does not know a parent element's context.
  • Output unit — the unit of the result: rem (recommended) or px. rem values are rounded to four decimal places, px values to three.
  • Root font size (px) — the reference for the rem conversion (default 16).
  • Size at the min viewport / Size at the max viewport — the font size at the narrowest and at the widest viewport (default 1 and 2.5 rem). If the second size is smaller than the first ("smaller = shrinking"), the font shrinks on wider screens.

Inputs (Viewport Range card):

  • Min Viewport (px) / Max Viewport (px) — the range over which it interpolates (default 320 and 1440).
  • Type Scale Presets fill both sizes with a typical step value and set the unit to 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 (Result card): the finished expression in the clamp() Value field and the full font-size: …; line in the CSS Property field, both copyable with a click. With the defaults you get:

font-size: clamp(1rem, 0.5714rem + 2.1429vw, 2.5rem);

The calculator always uses the smaller value as the lower bound and the larger one as the upper bound — for shrinking sizes too, which then get a negative vw term (2 → 1 rem becomes clamp(1rem, 2.2857rem - 1.4286vw, 2rem)). If both sizes are equal, it simply outputs the fixed value without clamp().

Warnings and errors: warnings appear below the result when

  • the larger size is more than 2.5 times the smaller one — the text may then not reach 200 % when users zoom (WCAG 1.4.4), because the vw term barely responds to browser zoom;
  • the size shrinks ("Shrinking size: the text gets smaller on wider screens.").

Invalid input replaces the result with an error message: no numbers ("Please enter numbers."), identical viewport widths, a Min Viewport above the Max Viewport, or negative sizes.

Live Preview: an editable sample text in Font A, set at the computed size. Its header shows the current viewport width and the resulting size in px and rem (Viewport: 1280px | Font size: 36.6px (2.286rem)). Resize the window and the readout follows.

Code Examples: an accordion with the result in four forms:

  • Plain CSS — an .element rule with font-size.
  • CSS Custom Properties — the value as --font-size-fluid in :root, used via var().
  • SCSS function (Dart Sass) — a function fluid($min-size, $max-size, $min-vw: 320px, $max-vw: 1440px, $root: 16px) with @use "sass:math"; that turns px arguments into a clamp() expression, plus a call with your values. The function always outputs rem, regardless of Output unit, and does not round; the // → comment in the example shows the calculator's result in the chosen output unit.
  • Tailwind CSS — an arbitrary-value class without spaces, e.g. text-[length:clamp(1rem,0.5714rem_+_2.1429vw,2.5rem)]. The underscore stands for a space, and the length: prefix tells Tailwind this is a size, not a colour.

Fluid type scale

Below the calculator, the Fluid type scale card generates a complete fluid type scale. Each step is base × ratio^step, computed once for the smallest and once for the largest viewport and interpolated in between with clamp().

  • Base at min viewport (px) / Base at max viewport (px) — the base size at either end (default 16 and 18 px).
  • Ratio at min viewport / Ratio at max viewport — the step ratio at either end (default 1.2 Minor third and 1.25 Major third). The choices are 1.125 Major second, 1.2 Minor third, 1.25 Major third, 1.333 Perfect fourth, 1.414 Augmented fourth, 1.5 Perfect fifth and 1.618 Golden ratio.
  • The scale takes the viewport range and root font size from the calculator above; output is always in rem.

The table lists steps −2 to 5 (--step--2 xs, --step--1 sm, --step-0 base, --step-1 lg up to --step-5 4xl), largest first, each with its min and max size in px, the clamp() value and an "Aa" sample in Font A. On narrow screens each row stacks into a labelled block. Copy CSS copies the whole scale as custom properties:

css
:root {
    --step--2: clamp(0.6944rem, 0.6871rem + 0.0365vw, 0.72rem);
    --step--1: clamp(0.8333rem, 0.8143rem + 0.0952vw, 0.9rem);
    --step-0: clamp(1rem, 0.9643rem + 0.1786vw, 1.125rem);
    /* … up to --step-5 */
}

Architecture and privacy

At its core the tool is client-side: font selection, the installed check, local files, preview, glyph table, comparison, clamp() calculator and type scale all run entirely in your browser. There is no account, no storage and no history — after a reload the tool starts empty.

  • The Google Fonts list is fetched by the tool's server via the Google Fonts Developer API and cached for 30 days. If a refresh fails, the previous list stays in use. Your browser only loads a slim version (family, category, styles) from the tool itself, so searching causes no request to Google.
  • The font files of a Google typeface, however, are loaded by your browser directly from Google when you pick it (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.
  • Stylesheet URLs are fetched straight from your browser too — the provider receives a request carrying your IP.
  • Local font files are read by the browser through the FontFace API. They are not uploaded and reach neither the tool nor any third party.

So that arbitrary stylesheets and their font files can load at all, the tool deliberately relaxes its Content Security Policy: style and font sources are allowed 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. Concrete workflows are in the Examples; collected tricks in Tips & Tricks. You can try everything directly in the tool.