<div class="field-items">
   <div class="field-item even">
      <div id="playground-result" style="font-family: sans-serif;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium consequuntur ducimus illo magni ipsum. Sunt ullam a enim dolor officia incidunt fugit et voluptatum modi amet ab quos impedit odit pariatur aperiam, veritatis iusto ut? Laborum culpa doloremque sit rerum!</div>
      <div class="grid-x grid-margin-x">
         <div id="playground-value" class="cell medium-12 large-6">
           <label>
             <input type="radio" name="value" value="Arial" checked="">Arial</label>
           <label>
             <input type="radio" name="value" value="Georgia">Georgia</label>
           <label>
             <input type="radio" name="value" value="Courier">Courier</label>
           <label>
             <input type="radio" name="value" value="serif">serif</label>
           <label>
             <input type="radio" name="value" value="sans-serif">sans-serif</label>
           <label>
             <input type="radio" name="value" value="cursive">cursive</label>
           <label>
             <input type="radio" name="value" value="fantasy">fantasy</label>
           <label>
             <input type="radio" name="value" value="monospace">monospace</label></div>
      </div>
   </div>
</div>

#playground-result{
  padding: 10px;
  font-size: 16px;
  border: 2px solid grey;
  margin-bottom: 10px;
}
label{
  font-size: 18px;
}

var radios = document.querySelectorAll('#playground-value input[type="radio"]');
function changeHandler(event){
  document.getElementById('playground-result').style.fontFamily = this.value;
}
         Array.prototype.forEach.call(radios,function(radio){radio.addEventListener('change',changeHandler);});