Helvetica Neue font renders element sizes differently than Helvetica

Question

Having two simple elements and CSS like here in JSFiddle:

<span class="text">f</span><span class="text">fl</span>

.text {
  font-family: "Helvetica Neue"
}

When running the code in Chrome, the first span width covers all of the text while the second span width is 0. When I change the font to Helvetica, both spans have correct and expected width appropriate to the text within them.

My understanding is that it is somehow related to ffl | Latin small ligature and my guess is that the former font contains the ffl ligature while the latter does not.

Is there a way how to work-around it and selectively disable transformation of certain Unicode characters while using "Helvetica Neue"? Or do I simply need to use a different font?

Just found that font-variant-ligature might be a solution. Its not obvious to me what all ligatures does it affects, though. I need to work-around the issue just for small Latin ligatures. Namely, these Unicode characters:

• U+FB00 (ff): ff
• U+FB01 (fi): fi
• U+FB02 (fl): fl
• U+FB03 (ffi): ffi
• U+FB04 (ffl): ffl

..but not affect any complex language like Japanese, Arabic etc.

Answer 1

Make the span display:inline-block

.text {
  display: inline-block;
}

.text, 
.text_old {
  background: radial-gradient(white, red);
  font-family: "Helvetica Neue";
  font-size: 40px;
}

<p>With "inline-block"</p>
<span class="text">f</span><span class="text">fl</span>
 

<p>Without "inline-block"</p>
<span class="text_old">f</span><span class="text_old">fl</span>