JSFiddle - React, Tailwind, and code Playground

by Travis Almand

HTML

<label id="font">
  <span>font</span>
  <input type="text" disabled />
</label>

<hr />

<label id="font-style">
  <span>font-style</span>
  <select>
    <option value=""></option>
    <option value="normal">normal</option>
    <option value="italic">italic</option>
    <option value="oblique">oblique</option>
  </select>
</label>

<label id="font-weight">
  <span>font-weight</span>
  <select>
    <option value=""></option>
    <option value="normal">normal</option>
    <option value="bold">bold</option>
    <option value="lighter">lighter</option>
    <option value="bolder">bolder</option>
    <option value="100">100</option>
    <option value="200">200</option>
    <option value="300">300</option>
    <option value="400">400</option>
    <option value="500">500</option>
    <option value="600">600</option>
    <option value="700">700</option>
    <option value="800">800</option>
    <option value="900">900</option>
  </select>
</label>

<label id="font-stretch">
  <span>font-stretch</span>
  <select>
    <option value=""></option>
    <option value="ultra-condensed">ultra-condensed</option>
    <option value="extra-condensed">extra-condensed</option>
    <option value="condensed">condensed</option>
    <option value="semi-condensed">semi-condensed</option>
    <option value="normal">normal</option>
    <option value="semi-expanded">semi-expanded</option>
    <option value="expanded">expanded</option>
    <option value="extra-expanded">extra-expanded</option>
    <option value="ultra-expanded">ultra-expanded</option>
  </select>
</label>

<label id="font-size">
  <span>font-size</span>
  <input type="text" value="" required />
</label>

<label id="line-height">
  <span>line-height</span>
  <input type="text" value="" />
</label>

<label id="font-family">
  <span>font-family</span>
  <input type="text" value="" required />
</label>

<button id="btn_update">update</button>

<div id="example">This is an example</div>

SCSS

:root {
  --font: inherit;
}

html {
  font-family: serif;
  font-size: 10px;
}

body {
  font: normal normal normal 1.6rem/1.6rem sans-serif;
}

label {
  display: block;
  margin: 10px;
  
  span {
    margin-right: 10px;
  }
  
  input {
    font-size: 1.4rem;
  }
  
  select {
    font-size: 1.4rem;
  }
}

button {
  font-size: 1.6rem;
  padding: 10px 20px;
}

#font input {
  width: 400px;
}

#example {
  border: 1px solid black;
  font: var(--font);
  margin: 20px;
  padding: 20px;
}

[required] {
  border-color: red;
}

JavaScript

console.clear();

var inp_font = document.querySelector('#font input');
var sel_fontStyle = document.querySelector('#font-style select');
var sel_fontWeight = document.querySelector('#font-weight select');
var sel_fontStretch = document.querySelector('#font-stretch select');
var inp_fontSize = document.querySelector('#font-size input');
var inp_lineHeight = document.querySelector('#line-height input');
var inp_fontFamily = document.querySelector('#font-family input');
var btn_update = document.querySelector('#btn_update');

var update = function () {
	var font = '';
	var values = {
  	fontStyle: sel_fontStyle.value,
    fontWeight: sel_fontWeight.value,
    fontStretch: sel_fontStretch.value,
    fontSize: inp_fontSize.value,
    lineHeight: inp_lineHeight.value,
    fontFamily: inp_fontFamily.value
  }
  
  if (!values.fontSize || !values.fontFamily) {
  	console.error('font-size and font-family are required');
    return false;
  }
  
  for (var value in values) {
  	if (values[value] && values[value] !== 'inherit') {
    	if (value === 'fontSize') {
      	font += ' ' + values[value];
      } else if (value === 'lineHeight') {
      	font += '/' + values[value];
      } else {
	    	font += ' ' + values[value];
      }
    }
  }
  
  console.log(font);
  inp_font.value = font;
  document.documentElement.style.setProperty('--font', font);

  /* inp_font.value = `${sel_fontStyle.value} ${sel_fontWeight.value} ${sel_fontStretch.value} ${inp_fontSize.value}/${inp_lineHeight.value} ${inp_fontFamily.value}`; */
  
  //document.documentElement.style.setProperty('--font', font);
};

btn_update.addEventListener('click', update);