How to prevent a ligature at one, specific place? - html

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?

Answer 1

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‌tierheft</p>

Answer 2

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>