JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Font Guess</h1>

<label for="font-family"><strong>Please type a correct font-family value:</strong></label>
<input id="font-family" type="text" value="Consolas, Menlo, Monaco, 'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', monospace, sans-serif" placeholder="Helvetica Neue, Arial, sans-serif" style="display: block; padding: 4px; font-size: 20px; width: 90%"/>

<h4>Tester</h4>
<div id="fake">
  <div id="render">我Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, tempore similique! Blanditiis explicabo adipisci, ea cupiditate recusandae cumque iste alias laboriosam quisquam, earum fugit, perspiciatis eveniet nemo. Consequatur, impedit, ea.</div>
</div>

<p>
  <strong>
    Result with single size method (faster) : 
    <span id="result-with-single-size-method"></span>
  </strong>
</p>

<p>
  <strong>
    Result with multiple sizes method (slower but safer): 
    <span id="result-with-multiple-sizes-method"></span>
  </strong>
</p>

CSS

html,
body {
    font-family: foo;
}

#fake {
  font-family: bar;
}

JavaScript

/**
 * Run the test on every key press
 */
document.getElementById('font-family').addEventListener('keyup', runTest, false);
runTest();

function runTest() {
  var render = document.getElementById('render');
  var resultWithSingleSizeMethod = document.getElementById('result-with-single-size-method');
  var resultWithMultipleSizesMethod = document.getElementById('result-with-multiple-sizes-method');
  var fontFamily = document.getElementById('font-family').value;
  
  render.style.fontFamily = fontFamily;

  renderTestResult(resultWithSingleSizeMethod, getFontTesterSingleSize);
  renderTestResult(resultWithMultipleSizesMethod, getFontTesterMultipleSizes);
  
  function renderTestResult(resultElement, compareMethod) {
    var matchingFontFamily = searchRenderedFont(render, compareMethod);
    
    if(matchingFontFamily) {
      resultElement.style.color = 'green';
      resultElement.innerHTML = matchingFontFamily;
    } else {
      resultElement.style.color = 'red';
      resultElement.innerHTML = 'Sorry no match';
    }
  }
}

/**
 * Returns a string containing every characters used for rendering comparaison
 */
function getTestString() {
  testString = '';
  testString += 'abcdefghijklmnopqrstuvwxyz';
  testString += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
  testString += '01234567890';
  testString += '@#&é\'(§è!çà)°-_^¨$*`£ù%=+:/;.,?';
  testString += '•ë‘{¶«¡Çø}—€ôÙ@≠÷…∞';
  return testString;
}

/**
 * Creates a temporary element inside an absolute container
 * Sets the given font-family
 * Returns the element
 */
function createFontTester(fontFamily) {
  var container = document.createElement('div');
  var tester = document.createElement('div');
  
  container.style.position = 'absolute';
  container.style.overflow = 'auto';
  container.style.visibility = 'hidden';
  
  tester.style.fontFamily = fontFamily;
  tester.style.display = 'inline';
  tester.style.visibility = 'hidden';
  
  // The size should be big enough to make a visual difference
 ...