To disable one ligature occurrence in a web label, wrap its letters in an inline span and disable the relevant ligature feature there. Other text keeps its settings. CSS has no general switch that disables one named ligature throughout a font. MDN’s ligature controls define feature categories rather than individual substitutions.

This guide is for a Mac user editing a web page’s HTML and CSS. The concrete task is to separate the first fi in the synthetic label fine flake office fine, while allowing the remaining text to retain its ligatures. A small local test makes the difference between changing one occurrence and changing a whole feature visible.

What can CSS selectively disable?

A ligature feature can contain multiple substitutions. Disabling liga means disabling that feature for the affected text; it does not mean selecting one particular letter pair. Likewise, font-variant-ligatures: no-common-ligatures controls common ligatures through liga and clig. The actual substitutions depend on the font. MDN: font-variant-ligatures

The useful distinction is between where a setting applies and which font feature it controls. You can narrow the setting to two letters with markup, even when the feature itself contains many ligatures. That gives you an occurrence-level workaround without needing a font-wide exclusion switch.

Desired result Suitable approach Condition
Separate one occurrence of fi Wrap that occurrence and disable its feature locally You can edit the markup
Remove discretionary ligatures but retain common ones Use no-discretionary-ligatures on the intended element The unwanted substitution belongs to dlig
Remove every fi while retaining every other common ligature Use a documented font-specific feature, if available The font must provide the necessary control
Change one occurrence in an application you cannot edit Look for that application’s documented character-level formatting Web CSS does not establish what a desktop application supports

Prefer font-variant-ligatures for the categories it supports. MDN recommends the higher-level font properties when available; font-feature-settings provides access to lower-level OpenType features for other cases. Writing font-feature-settings: "liga" off does not add pair-specific control. MDN: font-feature-settings

Make a local comparison on your Mac

Use a standalone file first so you can compare the result without unrelated page styles. In TextEdit, choose File > New, then Format > Make Plain Text. Enter the complete example below, save it as ligature-demo.html, and choose Use .html if prompted. These are Apple’s documented steps for creating an HTML file in TextEdit. Apple: Work with HTML documents in TextEdit on Mac

Open the saved file in your browser. The example uses locally available fonts and has no library or download requirement. Its font list is illustrative: a visible difference requires the selected font to contain the relevant ligatures. The browser rendering is the test; no particular glyph appearance is assumed.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Ligature comparison</title>
  <style>
    body {
      margin: 2rem;
      color: #222;
      background: #fff;
      font-family: system-ui, sans-serif;
    }

    main {
      max-width: 42rem;
    }

    .sample {
      font-family: Georgia, "Times New Roman", serif;
      font-size: 2.5rem;
      line-height: 1.5;
      letter-spacing: normal;
      font-variant-ligatures: common-ligatures;
    }

    .separate-pair,
    .all-common-off {
      font-variant-ligatures: no-common-ligatures;
    }
  </style>
</head>
<body>
  <main>
    <h2>Baseline</h2>
    <p class="sample">fine flake office fine</p>

    <h2>First pair separated</h2>
    <p class="sample"><span class="separate-pair">fi</span>ne flake office fine</p>

    <h2>All common ligatures disabled</h2>
    <p class="sample all-common-off">fine flake office fine</p>
  </main>
</body>
</html>

In the middle row, the span contains both letters of the targeted fi. The rest of that row inherits the common-ligature setting. A span is appropriate for this purely stylistic grouping: WHATWG defines it as an element that represents its children without adding meaning of its own. WHATWG: The span element

Read the comparison in three passes:

  1. Compare the first fine in the baseline and middle rows. Look at the letter shapes, not just the total width.
  2. Compare flake, office, and the final fine between those rows. They are outside the exception and should retain their original feature settings.
  3. Compare the bottom row with the others. This is the broader control: common ligatures are disabled throughout that row.

If all three rows look identical, the comparison is inconclusive. Change the sample font to the font you actually intend to use, and choose letter sequences for which that font documents ligatures. A CSS declaration cannot demonstrate a substitution that the selected font does not provide.

Apply the exception without disrupting text flow

For a short label, place the span directly around the entire sequence you want separated. Keep the characters before and after it adjacent in the source, as the example does with fi and ne. Do not insert a space or newline inside the word merely to make the markup easier to read.

The span needs the feature-setting change. Simply putting one letter in an otherwise unstyled span is not a dependable ligature breaker: W3C’s text specification requires shaping to continue across inline boundaries when there is no effective formatting change. It also defines circumstances in which margins, borders, padding, or other formatting break shaping. W3C: Shaping Across Element Boundaries

Keep this exception as an ordinary inline span. Adding inline-block, spacing, or layout wrappers introduces additional layout decisions that the task does not require. After applying the typography setting, narrow the browser window and inspect the label in its intended container. Treat unchanged line wrapping as something to check, since a different glyph choice can change the space the text occupies.

For longer sequences, decide the intended boundary explicitly. If the unwanted substitution involves ffi, wrapping only fi also creates a formatting boundary inside the larger sequence. Test the complete word and adjacent letters rather than assuming that every overlapping substitution will behave independently.

When adapting the example to an existing page, edit the relevant label in its source or component. Avoid rebuilding an entire paragraph from its visible text just to add one exception; retain its existing links, emphasis, and element structure. This example deliberately handles one known occurrence rather than attempting automatic replacement across an arbitrary page.

What if the ligature remains—or other ligatures disappear?

Use the comparison as a diagnostic sequence rather than adding more overrides immediately.

First, check the feature category. The example targets common ligatures. If the font documents the unwanted substitution under dlig, apply no-discretionary-ligatures to the exception instead. A contextual substitution may involve calt, controlled by no-contextual; that setting can affect other contextual forms within the selected text. MDN’s feature-category definitions

Next, check competing settings. An existing font-feature-settings declaration can override the feature choices implied by font-variant-ligatures. W3C specifies that the low-level feature settings are applied later during feature resolution. Review that declaration before concluding that the span approach is unsupported. W3C: Font Feature and Variation Resolution

Then, check the scope. If other words lose ligatures, confirm that the exception class is attached only to the targeted span. A setting applied to the paragraph or its container reaches a much larger text range. In the local example, the bottom row intentionally demonstrates that broader result.

Finally, distinguish optional typography from required shaping. font-variant-ligatures: none is broader than this task needs, and required ligatures are outside its disabling controls. W3C explicitly preserves required ligatures under that property. W3C: Ligatures

If the goal is to remove one ligature type everywhere, the local span technique must be applied to each intended occurrence. A font-specific feature may offer a cleaner solution, but its tag and effect must come from that font’s documentation. Do not assume that a stylistic-set number has the same meaning in different fonts.

Does a shaping library provide finer control?

HarfBuzz exposes feature ranges through hb_feature_t: a feature has a tag, value, inclusive start, and exclusive end, expressed through cluster values. This allows an application that calls the shaping library to apply a feature setting to a limited range. The range is still a range for a feature, rather than a universal selector for one named ligature. HarfBuzz: hb_feature_t

That API belongs to a different layer from ordinary page CSS. HarfBuzz’s documented mechanism passes feature requests to hb_shape(). Its examples describe shaping buffers and font lookup rules, rather than adding a browser stylesheet option. For this Mac web-label task, introducing a custom shaping pipeline would add work beyond the inline exception. HarfBuzz: OpenType features

Finish by checking the targeted pair, the surrounding ligatures, and the label at its actual display width. Keep the smallest working exception: the complete unwanted sequence inside one span, the appropriate feature disabled there, and the remaining text retaining its intended settings.

Sources