<link href='https://fonts.googleapis.com/css?family=Fira+Sans' rel='stylesheet' type='text/css'>
<div>
  <p class="text">Застосована влативість<br> font-variant-ligatures: no-common-ligatures;</p>
<span class="off">fi</span>
</div>
<div> 
<p class="text">Застосована влативість<br> font-variant-ligatures: common-ligatures;</p>
<span class="on">fi</span>
  </div>
body {
  font-family: 'Fira Sans', sans-serif;
  font-size: 20px;
  text-align: center;
  }
.text{
  font-family: Lora, serif;
}
.off {
  font-variant-ligatures: no-common-ligatures;
  color: #333;
  font-size: 9em;

}

.on {
  -webkit-font-variant-ligatures: common-ligatures;
  font-variant-ligatures: common-ligatures;
  color: gold;
  font-size: 9em;

}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.