<div class="content">
  <div class="buttons">
  <button class="button" onclick="uCond()">ultra-condensed</button> 
  <button class="button" onclick="eCond()">extra-condensed</button>  
  <button class="button" onclick="cond()">condensed</button> 
  <button class="button" onclick="sCond()">semi-condensed</button> 
    <button class="button" onclick="normal()">normal</button> 
     <button class="button" onclick="sExp()">semi-expanded</button> 
    <button class="button" onclick="expanded()">expanded</button> 
    <button class="button" onclick="eExp()">extra-expanded</button> 
    <button class="button" onclick="uExp()">ultra-expanded</button>
  </div>

<div id="text" style="font-size: 35px;">CSS font-stretch Property</div>
  
  <div class="col"><h2>CSS Code:</h2><p id="code">CSS code</p>
</div>
  <p style="color: red;">*the CSS font-stretch property has no effect if the chosen font does not offer condensed or expanded faces!</p>
</div>

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content {
  position: relative;
}

.buttons {
  left:-40%;
  position: absolute;
  top:-50px;
  z-index:1;
}

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

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

.col {
  position: absolute;
  font-weight: bold;
  font-size:15px;
  width: 100%;
  left:0;
  top:100px;
}

#text {
  font-stretch: normal;
  font-family: Encode Sans;
}

@font-face {
  font-family: Encode Sans;
  src: url(https://lenadesign.org/wp-content/uploads/2022/01/EncodeSans-VariableFont_wdthwght.ttf);
}

function uCond() {
  document.getElementById("text").style.fontStretch="ultra-condensed" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "font-stretch: ultra-condensed;") {
    x.innerHTML = "font-stretch: ultra-condensed;";
  } else {
    x.innerHTML = "font-stretch: ultra-condensed;";
  }
}

function eCond() {
  document.getElementById("text").style.fontStretch="extra-condensed" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "font-stretch: extra-condensed;") {
    x.innerHTML = "font-stretch: extra-condensed;";
  } else {
    x.innerHTML = "font-stretch: extra-condensed;";
  }
}

function cond() {
  document.getElementById("text").style.fontStretch="condensed" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "font-stretch: condensed;") {
    x.innerHTML = "font-stretch: condensed;";
  } else {
    x.innerHTML = "font-stretch: condensed;";
  }
}

function sCond() {
  document.getElementById("text").style.fontStretch="semi-condensed" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "font-stretch: semi-condensed;") {
    x.innerHTML = "font-stretch: semi-condensed;";
  } else {
    x.innerHTML = "font-stretch: semi-condensed;";
  }
}

function normal() {
  document.getElementById("text").style.fontStretch="normal" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "font-stretch: normal;") {
    x.innerHTML = "font-stretch: normal;";
  } else {
    x.innerHTML = "font-stretch: normal;";
  }
}

function sExp() {
  document.getElementById("text").style.fontStretch="semi-expanded" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "font-stretch: semi-expanded;") {
    x.innerHTML = "font-stretch: semi-expanded;";
  } else {
    x.innerHTML = "font-stretch: semi-expanded;";
  }
}

function expanded() {
  document.getElementById("text").style.fontStretch="expanded" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "font-stretch: expanded;") {
    x.innerHTML = "font-stretch: expanded;";
  } else {
    x.innerHTML = "font-stretch: expanded;";
  }
}

function eExp() {
  document.getElementById("text").style.fontStretch="extra-expanded" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "font-stretch: extra-expanded;") {
    x.innerHTML = "font-stretch: extra-expanded;";
  } else {
    x.innerHTML = "font-stretch: extra-expanded;";
  }
}

function uExp() {
  document.getElementById("text").style.fontStretch="ultra-expanded" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "font-stretch: ultra-expanded;") {
    x.innerHTML = "font-stretch: ultra-expanded;";
  } else {
    x.innerHTML = "font-stretch: ultra-expanded;";
  }
}