<p><span>Th</span>e <span>fi</span>x was in for the <span>fi</span>ve <span>fl</span>irting <span>fl</span>eurons.</p>


<button>Turn ligatures</button>

p {
  font-size: 40px;
  margin-bottom: 10px;
  padding-left: 10px;
  font-style: italic;
}

body {
  background-color: #ddd;
  font-family: "chaparral-pro";
  margin: 0;
  padding: 0;
}

span {
  transition: color .3s ease;
}

.liga {
  font-feature-settings: "liga" 1; 
  
  span {
    color: lighten(red, 10);
  }
}

button {
  cursor: pointer;
  margin-left: 10px;
  
  &:after {
    content: " on";
  }
  
  &.on:after {
    content: " off";
  }
}

var btn = document.querySelector("button"),
    body = document.documentElement,
    activeClass = "liga";

btn.addEventListener("click", function(e){
  e.preventDefault();
  body.classList.toggle(activeClass);
  btn.classList.toggle('on');
});