OpenType Feature Playground
Preview ligatures, numeral styles, capital forms, and kerning in a browser font.
Online Tool
Office affinity AVATAR — 0123456789 — 1/2
.type-sample {
font-family: "Fraunces", Georgia, serif;
font-variant-ligatures: common-ligatures;
font-variant-numeric: normal;
font-variant-caps: normal;
font-kerning: auto;
}A feature appears only when your selected font includes it. The browser may ignore unsupported options without changing the text.
Tool Working Principle
The playground applies standard CSS font feature properties to the preview. A browser only displays an option when the selected font exposes the corresponding OpenType feature; unsupported settings may have no visible effect.
Step-by-Step Usage Tutorial
- 1Enter a font-family stack and sample text.
- 2Choose ligature, numeral, capital, and kerning settings.
- 3Compare the live specimen and copy the CSS.
Frequently Asked Questions
Do I need an account to use OpenType Feature Playground?+
No. Every tool on TypeTempo runs fully in the browser with no account, email, or API key.
Is my input text stored anywhere?+
Tool calculations use the text in your browser, and the app does not send that input to the TypeTempo application server. A preview may still request font files or other assets from an external provider; those requests do not include the text you entered.
Can I use the output commercially?+
You can use generated text and CSS in personal or commercial work. If a result depends on a named typeface or third-party asset, check that family's or asset's licence before using or distributing its files.
Which browsers are supported?+
The tools are designed for modern desktop and mobile browsers. Font rendering and individual CSS or Unicode features can vary, so check the specific result in the browsers and devices you support.
Why do some settings appear to do nothing?+
The active font may not include that OpenType feature, or the browser may not support the requested value. Try a font known to support the feature and confirm in the target browser.