<div class="content">
  <div class="buttons">
  <button class="button" onclick="arial()">Arial</button> 
  <button class="button" onclick="verdana()">Verdana</button>  
  <button class="button" onclick="helvetica()">Helvetica</button> 
  <button class="button" onclick="tahoma()">Tahoma</button>
  <button class="button" onclick="trebuchetMS()">Trebuchet MS</button>
  <button class="button" onclick="timesNewRoman()">Times New Roman</button>
  <button class="button" onclick="georgia()">Georgia</button>
  <button class="button" onclick="garamond()">Garamond</button>
  <button class="button" onclick="courierNew()">Courier New</button>
    <button class="button" onclick="brushScriptMT()">Brush Script MT</button>
  </div>
  
<p id="text">Sample</p>
 
<div class="col"><h2>CSS Code:</h2><p id="code">CSS code</p>
</div>
  </div>
body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content {
  position: relative;  
}

#text {
  font-size: 100px;
}

.buttons {
  left:0;
  position: fixed;
  top:0;
  z-index:1;
}

button {
  background-color: #333;
  color: white;
  border: none;
  display: block;
  padding:5px;
  width: 100px;
  margin:5px;
  transition: .2s;
  font-weight: bold;
}

button:hover {
  background-color: white;
  color: #333;
}

.col {
  position: fixed;
  font-weight: bold;
  font-size:15px;
  width: 100%;
  left:1%;
  top:75%;
}

@media only screen and (max-width: 600px) {
  #text {
    margin-left:100px;
  }
}

@media only screen and (max-width: 600px) {
  .col {
    margin-top:10px;
  }
}
function arial() {
  document.getElementById("text").style.fontFamily="Arial, sans-serif" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "font-family: Arial, sans-serif;") {
    x.innerHTML = "font-family: Arial, sans-serif;";
  } else {
    x.innerHTML = "font-family: Arial, sans-serif;";
  }
}

function verdana() {
  document.getElementById("text").style.fontFamily="Verdana, sans-serif" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "font-family: Verdana, sans-serif;") {
    x.innerHTML = "font-family: Verdana, sans-serif;";
  } else {
    x.innerHTML = "font-family: Verdana, sans-serif;";
  }
}

function helvetica() {
  document.getElementById("text").style.fontFamily="Helvetica, sans-serif" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "font-family: Helvetica, sans-serif;") {
    x.innerHTML = "font-family: Helvetica, sans-serif;";
  } else {
    x.innerHTML = "font-family: Helvetica, sans-serif;";
  }
}

function tahoma() {
  document.getElementById("text").style.fontFamily="Tahoma, sans-serif" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "font-family: Tahoma, sans-serif;") {
    x.innerHTML = "font-family: Tahoma, sans-serif;";
  } else {
    x.innerHTML = "font-family: Tahoma, sans-serif;";
  }
}

function trebuchetMS() {
  document.getElementById("text").style.fontFamily="Trebuchet MS, sans-serif" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "font-family: 'Trebuchet MS', sans-serif;") {
    x.innerHTML = "font-family: 'Trebuchet MS', sans-serif;";
  } else {
    x.innerHTML = "font-family: 'Trebuchet MS', sans-serif;";
  }
}

function timesNewRoman() {
  document.getElementById("text").style.fontFamily="Times New Roman, serif" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "font-family: 'Times New Roman', serif;") {
    x.innerHTML = "font-family: 'Times New Roman', serif;";
  } else {
    x.innerHTML = "font-family: 'Times New Roman', serif;";
  }
}

function georgia() {
  document.getElementById("text").style.fontFamily="Georgia, serif" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "font-family: Georgia, serif;") {
    x.innerHTML = "font-family: Georgia, serif;";
  } else {
    x.innerHTML = "font-family: Georgia, serif;";
  }
}

function garamond() {
  document.getElementById("text").style.fontFamily="Garamond, serif" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "font-family: Garamond, serif;") {
    x.innerHTML = "font-family: Garamond, serif;";
  } else {
    x.innerHTML = "font-family: Garamond, serif;";
  }
}

function courierNew() {
  document.getElementById("text").style.fontFamily="Courier New, monospace" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "font-family: 'Courier New', monospace;") {
    x.innerHTML = "font-family: 'Courier New', monospace;";
  } else {
    x.innerHTML = "font-family: 'Courier New', monospace;";
  }
}

function brushScriptMT() {
  document.getElementById("text").style.fontFamily="Brush Script MT, cursive" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "font-family: 'Brush Script MT', cursive;") {
    x.innerHTML = "font-family: 'Brush Script MT', cursive;";
  } else {
    x.innerHTML = "font-family: 'Brush Script MT', cursive;";
  }
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.