JPKCom DB

Fonts

Test and compare typefaces: search Google Fonts, check system fonts, load local font files — with an A/B comparison, a glyph table and a clamp() calculator.

Try a typeface before you commit to it

The 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 four sources — nearly 2,000 Google Fonts, the system fonts on your device, a local font file or any stylesheet reachable over HTTPS — and the preview renders it straight away. Five views show the same font from different angles: a classic specimen across all sizes, an editable magazine layout, a glyph table, a side-by-side comparison of two typefaces, and a calculator for fluid font sizes that also builds a complete type scale.

It is built for everyone who works with type: designers comparing font pairings 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.

Four ways to a typeface

The sources sit side by side as tabs in the Font Selection card:

  • Google Fonts — a searchable list of the entire Google Fonts library, filterable by Category (Sans serif, Serif, Display, Handwriting, Monospace). Each entry shows its category and number of styles; one click loads the font with exactly the weights and styles it actually ships.
  • System — a picker with 51 entries: nine generic families (sans-serif, serif, monospace, system-ui …) plus common system fonts such as Arial, Georgia, Segoe UI, Calibri, Helvetica, Menlo and Ubuntu. The tool checks whether each font is installed on your device and flags missing ones as "not installed".
  • Font file — drag TTF, OTF, WOFF or WOFF2 files onto the drop zone or pick them via Choose files. The files stay in your browser; nothing is uploaded.
  • Stylesheet URL — the HTTPS address of an @font-face stylesheet (Adobe Fonts/Typekit, Bunny Fonts, Fontshare, your own CDN). If the server allows it via CORS, the tool reads the family names out of the stylesheet itself.

The Font A / Font B (compare) switch decides where your next pick goes: Font A appears in every preview, Font B additionally in the comparison. The Weight / style bar lets you choose a weight from 100 to 900, normal or italic. The manual covers the sources, the slots, the weight picker and every preview in detail.

Five views of the same typeface

  • Specimen — the classic type sample: the name of the chosen font set large ("AaBbCc" before you pick one), 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, a list and an info card, rendered in the chosen font and editable in place, right in the browser. This shows the typeface in a realistic reading context, not just as a sample alphabet.
  • Glyphs — a table of glyphs 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.
  • Compare A / B — Font A and Font B side by side: your own sample text with a size slider (10 to 120 px) and a paragraph of body copy in both fonts. You decide between two candidates without loading them back and forth.
  • Clamp() Calculator — a fluid-typography helper: you enter the size at the smallest and the largest viewport and get a ready-made clamp() line in rem or px that interpolates between the two screen widths — growing or shrinking, with a warning when the span gets in the way of browser zoom under WCAG, and with code for CSS, custom properties, SCSS (Dart Sass) and Tailwind. Below it, a Fluid type scale generates a complete fluid type scale as CSS variables.

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 pick 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. The tool points this out itself in the Google tab. For a quick preview that is harmless; for production, the usual advice is to self-host your web fonts.
  • Stylesheet URLs go to their provider. An address loaded in the Stylesheet URL tab is likewise fetched straight from your browser, so the provider (Adobe, Bunny, your CDN) receives a request.

The Google Fonts list itself is prepared and cached by the tool's server; searching it sends nothing to Google. Local font files never leave your machine at all. The manual has the details.

Try it now

→ Open Fonts — search for a typeface, click it, page through the five tabs. No account, free, right in the browser.

  • Colors — find the palette that fits your type: typeface and colour are the pair that sets the tone of a design.
  • SEO & GEO Analyzer — check whether your font stylesheet is included render-blocking and which resource hints (preload, preconnect) are set.

There is more on the sub-pages: the Manual with every source, tab and option in detail, real-world Examples, and collected Tips & Tricks.