How to toggle opentype ligatures and preview the result
- Step 1Drop your font — Any TTF, OTF, WOFF, or WOFF2. The tool inlines it as a base64 @font-face for the preview.
- Step 2Type sample text — Default: 'office difficult fluffy' — covers common ligature pairs. Customise for your domain (brand name with f-ligatures, etc.).
- Step 3Read the preview, copy the CSS — Three rows show the same text rendered with ligatures off, on (default), and dlig on. Pick the one that matches your design and copy the CSS.
Frequently asked questions
Why CSS instead of binary editing?+
opentype.js's GSUB writer is unreliable. CSS font-feature-settings has 99%+ browser support and is reversible — toggling ligatures is one line of CSS, not a font rebuild.
What's the difference between liga and calt?+
liga: standard ligatures (fi, fl). calt: contextual alternates (more sophisticated context-aware substitutions). Most fonts use calt for things like proper Arabic shaping or context-driven Latin alternates.
When should I disable ligatures?+
Code displays (programmatic monospace), monogram-style logos, applications where each character must be individually addressable (terminal apps, tabular displays).
Privacy first
Every JAD Font tool runs entirely in your browser using opentype.js and the wawoff2 WASM Brotli encoder. Your fonts never leave your device — verified by zero outbound network requests during processing.