0

I want to display ligatures on my website but only for a specific class like .ligature. That's all working fine in Firefox, Chrome and Safari (haven't tested IE).

But the thing is that the ligatures are being displayed everywhere on thew website in Firefox and Safari even when there's no class added to the markup. This somehow doesn't happen in Chrome.

I'm using the following CSS

.ligature{
text-rendering:optimizeLegibility;
-moz-font-feature-settings:"liga=1, dlig=1"; 
-ms-font-feature-settings:"liga", "dlig"; 
-o-font-feature-settings:"liga", "dlig"; 
-webkit-font-feature-settings:"liga", "dlig"; 
font-feature-settings:"liga", "dlig";
}

And some HTML for example

<h2 class="ligature">A large flask</h2> /*Should shown a ligature*/

<p>Some random paragraph text and a flask</p> */ Also shows a ligature in Safari and   
Firefox but not in Chrome (as it should be) */

Is this some king of browser bug? Or am I making an error somewhere?

NielsPilon
  • 500
  • 2
  • 7
  • 21

1 Answers1

0

Try being more specific and say something like 

h2 .ligature {
   text-rendering: optimizeLegibility;
   -moz-font-feature-settings:"liga=1, dlig=1"; 
   -ms-font-feature-settings:"liga", "dlig"; 
   -o-font-feature-settings:"liga", "dlig"; 
   -webkit-font-feature-settings:"liga", "dlig"; 
   font-feature-settings:"liga", "dlig";
}

That way it should only apply to h2 tags, and then your ligature class.

Ian Ryan Clarke
  • 268
  • 1
  • 8