Because local fonts depend on the operating system, the user's installation and glyph support. If the main family is missing on the device, the browser uses the fallback and the appearance changes.
Carregando ferramenta… / Loading tool…
Test family stacks, fallback, weight, size, style and spacing with real text.
Writing font-family does not guarantee the font will show: the property is a list of priorities, and the browser picks the first family that exists on the device and has a glyph for each character. If the main font is not installed, or lacks an accent, it moves down the list to the generic fallback. So an honest preview must test your product's real text, with accents, numbers and punctuation, not an idealized sample. This tool shows the rendering live and generates the CSS for the stack so you can validate it before publishing the interface.
The stack font-family: "Inter", system-ui, sans-serif works as a chain of plan Bs: the browser tries Inter; if it is missing, it uses the system interface font (system-ui); if that is still absent, it drops to the generic sans-serif, which always resolves to some available sans font. Ending the list with a generic (serif, sans-serif, monospace, cursive) is what guarantees a predictable choice.
The switch can happen even within a single word: if the main font lacks a glyph for a character, an accent, a symbol, an ideograph, only that character uses the fallback, while the rest keeps the main font. That is why testing with real text reveals breaks an English-only sample would hide.
Example 1, accent coverage: type "Ação, coração, R$ 1,234.56" and watch whether ã, ç, ó and the currency sign render in the same font as the rest. If a character "jumps" to a different shape, the main font does not cover that glyph, a common problem with reduced-set free fonts.
Example 2, available weights: compare weight 400 and 700, then an intermediate like 500. If 500 looks like a 400 artificially darkened, the browser may be synthesizing a weight the font does not actually ship, which changes appearance and sharpness.
There are two routes for a font to reach the page: use fonts already installed on the system (fast, but variable by device) or load a web font via @font-face (consistent, but with a download cost). This tool focuses on system-available fonts and building the stack, without requiring file uploads.
When publishing a web font, remember that only the weights and styles you actually load exist: asking for font-weight: 500 without that file makes the browser approximate or fake the stroke. Loading only the weights you use keeps the page light and avoids rendering surprises.
Paste the code into your HTML and the tool shows up on your page, without J-Kit's navigation and ads. It still runs in the browser of whoever visits your site.
<iframe
src="https://jkit.tools/embed/en-US/font-previewer"
width="100%"
height="600"
style="border:0"
loading="lazy"
title="Font Previewer"
></iframe>These references help contextualize formulas, standards, APIs and limitations used on this page. They do not replace professional validation when a result has legal, financial, medical or operational impact.
Because local fonts depend on the operating system, the user's installation and glyph support. If the main family is missing on the device, the browser uses the fallback and the appearance changes.
font-family: Inter, sans-serif;
font-size: 48px;
font-weight: 500;
font-style: normal;
letter-spacing: 0px;Text and family are rendered locally in the browser.