CODEWITHSUNDEEP
htmlcssutf-8ligature
slartidan
slartidan

Reputation: 21618

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?

Upvotes: 2

Views: 651

Answers (2)

Sophie Swett
Sophie Swett

Reputation: 3398

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>

Upvotes: 4

Maharkus
Maharkus

Reputation: 2898

You can use a span and give it font-variant-ligatures: none;:

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

body {
  font-family: 'Libre Baskerville', serif;
  font-variant-ligatures: normal;
}

p {
  font-size: 50px;
}

span {
  font-variant-ligatures: none;
}
<p>Han<span>fti</span>erheft</p>

Upvotes: 1

Related Questions