htmlcssutf-8ligature

How to prevent a ligature at one, specific place?

In general I like ligatures, they make texts easier to read. I want to enable them on all of my HTML-page.

However there is this one word Hanftierheft (it is german, and a compond word of Hanf and Tier and Heft). I do not want a ligature for ...nfti..., but I want a ligature for ...eft

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');
body {
  font-family: 'Source Sans Pro', sans-serif;
  font-variant-ligatures: normal;
  font-size: 50px;
}
Hanftierheft

How can I tell my browser to generally use ligatures, but not in that, one, specific case?

Solution

  • Use the entity for the zero-width non-joiner character, and write the word in your HTML code as Hanf‌tierheft.

    @import url('https://fonts.googleapis.com/css?family=Libre+Baskerville');

body {
  font-family: 'Libre Baskerville', serif;
  font-variant-ligatures: normal;
  font-size: 50px;
}
    <p>Hanf&zwnj;tierheft</p>