Preview ligature on/off rendering for any font, then export the CSS to control ligatures via font-feature-settings without modifying the binary file.
Upload your font and enter sample text (e.g., "office difficult")
We render the text twice — with liga/calt enabled and disabled
Get a preview HTML plus copy-paste CSS to apply the chosen mode site-wide
0 bytes uploaded. OpenType Ligature Toggle & Preview runs entirely in your browser using opentype.js and the File API. Your fonts never leave your device.
This tool requires the Free plan or higher.
Re-serialising the GSUB binary is brittle — opentype.js can read but doesn't reliably write OpenType layout tables. Controlling ligatures via CSS (font-feature-settings: "liga" 0;) is universal, reversible, and never corrupts the font file.
liga (standard ligatures), dlig (discretionary), calt (contextual alternates), hlig (historical), salt (stylistic alternates). The CSS output supports all five plus 'default'.
font-feature-settings has 99%+ support. font-variant-ligatures (the high-level alias) has 97%+. The generated CSS includes both with the standards-compliant version first.
List every GSUB/GPOS feature tag (liga, calt, smcp, ss01, swsh, kern) with human-readable labels and the font-feature-settings CSS to enable each one.
Open toolBuild a complete @font-face declaration with WOFF2/WOFF/TTF fallbacks, font-display, unicode-range, and proper format() hints. Copy-paste ready.
Open toolBuild a complete typography token system as CSS custom properties: --font-family, --font-size-{xs,sm,base,lg,xl}, --font-weight-{light,regular,bold}, --line-height-{tight,normal,relaxed}.
Open tool