JPKCom DB

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.

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 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 — pick a typeface, click Display Font, page through the four 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 how embedded web fonts affect load time and render-blocking resources.

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