<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero id officia eveniet fugit fugiat, delectus nihil at saepe asperiores odio! Totam soluta ipsam rem eaque harum dolor. Iste, molestias, harum! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed fugit, quibusdam voluptates rem eos ab ratione rerum non repudiandae qui vitae harum quia quisquam quae, ex soluta aut hic accusantium?</h1>
<h1 class="webfont">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero id officia eveniet fugit fugiat, delectus nihil at saepe asperiores odio! Totam soluta ipsam rem eaque harum dolor. Iste, molestias, harum! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed fugit, quibusdam voluptates rem eos ab ratione rerum non repudiandae qui vitae harum quia quisquam quae, ex soluta aut hic accusantium?</h1>
<button>Toggle font-size-adjust</button>

body {
  font-family: Georgia;
}

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

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

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

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)
})