Font Preview
Preview your own text in any font installed on this device, or upload a font file — then copy the CSS.
Lists every font installed on this device. Chromium-based browsers only — the browser asks once for permission.
Nothing uploaded yet.
TTF, OTF, WOFF and WOFF2 up to 20 MB. Uploaded fonts are registered in this page only — they are never sent anywhere and are dropped when you reload.
font-family: system-ui; font-size: 44px; font-weight: 400; font-style: normal; letter-spacing: 0px; line-height: 1.35; text-align: left; text-transform: none; color: #0f172a; background-color: #ffffff;
What is a font preview tool?
Most font previews on the web show you the same short list of web-safe fonts — a list you already know, and one that says nothing about the typefaces actually installed on your machine. This page starts from your own system instead.
There are three ways to get a font into it. The generic families (system-ui, sans-serif, serif, monospace) work in every browser. Read local fonts enumerates every typeface installed on this device through the browser's Local Font Access API and puts them in the picker — they render immediately, because the outlines are already on your machine and nothing is downloaded. Or upload a font file (TTF, OTF, WOFF or WOFF2) and the page registers it for this session, so you can proof a licensed brand face without installing it first.
Pick a font, type your own text, and adjust size, weight, style, letter spacing, line height, colours and alignment. The character set strip shows how digits and punctuation behave, and the CSS block is ready to copy — including an @font-face skeleton when the active font came from an uploaded file.
Nothing you type or upload leaves the browser.
How to use
Getting started
- Choose a font from the Font source panel. The generic families work everywhere; press Read local fonts to list everything installed on this device.
- To preview a font you already have as a file, press Upload font file and pick a TTF, OTF, WOFF or WOFF2 file. It is registered for this session and appears in the same picker.
- Type the text you want to proof — a headline, a button label, a product name.
- Adjust size, weight, style, letter spacing, line height, alignment, case and both colours. The preview applies the same CSS properties your stylesheet would.
- Copy the CSS block. For an uploaded font it also contains an @font-face skeleton, with the original file name standing in for the path you will host it at.
Tips for reliable results
- The enumerated list is exact, but it describes this device only. What is installed here is not what your visitors have — keep a fallback stack in your production CSS.
- Local font enumeration is Chromium-only and needs a secure context (HTTPS or localhost). In Safari and Firefox the button is hidden and the page says why; uploading still works.
- A family with several weights or styles appears once in the picker. Use the weight control and the italic toggle to move between the faces it actually ships.
- Uploaded fonts live in memory for this session. Reloading drops them and nothing is written to disk — that is deliberate, not a limitation you can configure away.
- Large CJK files (10 MB and up) take a moment to parse; the picker updates as soon as the font is decoded.
Use Cases
How local fonts and uploads are handled
Two unrelated browser APIs do the work here, and they behave very differently.
Enumerating installed fonts uses the Local Font Access API: window.queryLocalFonts() returns one record per installed face, with its family, full name, PostScript name and style. The page groups those records by family, sorts them and hands them to the picker. Rendering needs no download — the family name is passed straight to CSS and the operating system supplies the outlines, exactly as it would for your own stylesheet. Chromium ships the API behind a one-time permission; Safari and Firefox do not ship it at all, so the entry point is hidden there rather than left to fail.
Uploading uses the Font Loading API: the file is read into an ArrayBuffer, handed to new FontFace(family, buffer), loaded, and added to document.fonts. From that moment the font behaves like any other family and can be referenced by name in CSS.
- queryLocalFonts() requires a secure context (HTTPS or localhost) and rejects with NotAllowedError when the permission prompt is dismissed; the panel reports both cases instead of throwing.
- One family can show up in several styles. The list is de-duplicated by family name, so each typeface appears once and the style control picks the cut.
- FontFace accepts TTF, OTF, WOFF and WOFF2. A corrupted or unsupported file makes load() reject, and the page reports it rather than leaving a broken entry in the picker.
- Uploads are held in memory only — no network request, no disk write, no localStorage. That is why they do not survive a reload.
- Generic families resolve inside the browser and need no API at all, which is why they stay available even where the other two routes are not.
Examples
Listing the fonts installed on this device
const faces = await window.queryLocalFonts();
// [{ family: "Inter", fullName: "Inter Regular", style: "Regular" }, ...]
const families = [...new Set(faces.map((f) => f.family))].sort();
// Pass the choice straight to CSS: the OS supplies the outlines,
// no file is downloaded
element.style.fontFamily = `"${families[0]}", sans-serif`;Registering an uploaded file
const buffer = await file.arrayBuffer();
const face = new FontFace("Aurora Sans", buffer);
await face.load(); // rejects if the file is corrupt or the format is unsupported
document.fonts.add(face);
// from here on it behaves exactly like a locally installed font
element.style.fontFamily = '"Aurora Sans", sans-serif';The CSS block for an uploaded font
@font-face {
font-family: "Aurora Sans";
src: url("./AuroraSans.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
font-family: "Aurora Sans", sans-serif;
font-size: 44px;
line-height: 1.35;
color: #0f172a;
/* The path in src is a placeholder — replace it with
the address you will serve the file from. */FAQ
Why is the Read local fonts button missing in my browser?
The Local Font Access API is only implemented in Chromium-based browsers (Chrome, Edge, Opera, Brave) and only on a secure origin (HTTPS or localhost). In Safari and Firefox the button is hidden and the panel explains it — uploading a font file and the generic families both still work.
Does reading my installed fonts send anything to a server?
No. The browser shows a permission prompt, and after you allow it the page receives family and style names. No font data is read, nothing is uploaded, and the list is never transmitted anywhere.
Are the fonts I upload stored or sent anywhere?
Neither. The file is read into memory, registered with the browser's font set, and dropped when you close or reload the page. There is no network request and nothing is written to disk or localStorage.
Why do my uploaded fonts disappear when I reload?
Because the page deliberately keeps them in memory only. Persisting a font file would mean writing it to browser storage, and a preview tool has no reason to keep a copy of a file you already have. Re-upload it to continue.
Which file formats can I upload?
TTF, OTF, WOFF and WOFF2, up to 20 MB per file — those are the four container formats the browser's FontFace accepts. TrueType collections (.ttc) bundle several faces in one file and are not supported; export the individual faces instead.
Why do some weights look wrong or over-heavy?
When a family does not contain the weight you asked for, the browser synthesises it: faux bold thickens the outlines, faux italic slants them. If 600 looks smeared while 400 and 700 look right, the family simply does not ship a 600.
Can I use this to find out what my visitors have installed?
No, and no website can. Enumeration requires an explicit permission prompt on the visitor's own machine, so a page can never silently inventory a stranger's fonts. The list you see here describes this device only, which is why a fallback stack belongs in production CSS.
What should I put in the @font-face src URL?
The path where your own build serves the font file — for example /fonts/AuroraSans.woff2. The page generates the skeleton with the correct format() keyword derived from the file extension, so the URL is the only part you need to replace.
Related Tools
QR Code Generator
Free online QR code generator supporting text, URL, vCard types. Customize style, color, size, download high-quality images instantly.
Barcode Generator
Free online barcode generator for CODE128, EAN13, EAN8, UPC, CODE39, and ITF14. Customize size and colors, then download PNG or SVG barcodes.
SVG Viewer
Online SVG viewer and editor with live preview. Edit SVG code, inspect changes in real time, and download SVG files for front-end design work.
Screen Test
Free online screen testing tool to detect dead pixels, bright spots, and backlight bleeding. Multiple solid color tests, contrast tests, evaluate display quality.
Gradient Generator
Free online CSS gradient generator to create linear and radial gradient backgrounds. Visual color adjustment, one-click CSS code copy.
Color Picker
Free online color picker tool with HEX, RGB, HSL format conversion. Generate color palettes, get web colors, boost design efficiency.
