<h1>Lorem ipsum dolor sit amet.</h1>
<h1 class="webfont">Lorem ipsum dolor sit amet.</h1>
<button>Turn font-size-adjust</button>

body {
  font-family: Times;
}

h1 {
  font-size: 2rem;
  position: absolute;
  left: 30px; 
  top: 50px;
  bottom: 0;
  right: 30px;
  margin: auto;
  padding: 0;
  line-height: 1;
  z-index: 2;
  color: #7fdbff;
  opacity: .8;
}

.wf-active .webfont {
  font-family: "chaparral-pro";
  opacity: 1;
  z-index: 1;
  color: #0074d9;
}

.font-size-adjust {
  .webfont {
    font-size-adjust: .42;
  }
}

button {
  position: fixed;
  top: 20px;
  left: 30px;
  cursor: pointer;
  z-index: 999; // lazily position above text
  
  &:after {
    content: " on";
    display: inline;
    
    .font-size-adjust & {
      content: " off";
    }
  }
}

var btn = document.querySelector('button'),
    html = document.documentElement,
    toggleClass = "font-size-adjust";

btn.addEventListener('click', function(e){
  e.preventDefault();
  html.classList.toggle(toggleClass)
})