How to prevent a ligature at one, specific place?

Question

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?

score 3 · Accepted Answer · edited May 18 '18 at 19:07

3

Use the entity for the zero-width non-joiner character, and write the word in your HTML code as Hanf&zwnj;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>

edited May 18 '18 at 19:07

slartidan

20,403
15
83
131

answered May 18 '18 at 13:20

Tanner Swett

3,241
1
26
32

Thanks a lot - that's it! I reused @Maharkus ' awesome example code to have a working example for your solution. – slartidan May 18 '18 at 13:44

score 1 · Answer 2 · answered May 18 '18 at 13:33

1

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>

answered May 18 '18 at 13:33

Maharkus

2,841
21
35

Thanks for this awesome example code! I reused it for to make my question more clear. – slartidan May 18 '18 at 13:37
@slartidan No problem. Doesn't that solve your issue, though? – Maharkus May 18 '18 at 13:39
I would guess, that the intermediate span tag could be an impediment for search engines, etc. However I have no hard proof this this yet. Anyways: this is an easy to understand, working solution to my issue! – slartidan May 18 '18 at 13:39
Well without changing the HTML I don't see any solutions that aren't incredibly messy, ha. Maybe there is some way using Javascript. – Maharkus May 18 '18 at 13:42

How to prevent a ligature at one, specific place?

2 Answers2