JSFiddle - React, Tailwind, and code Playground

HTML

<p id="font_test_wrap">Test<span id="font_test">Test text. 123 + 666 = 789</span>Test</p>
<p id="out_test_log"></p>

CSS

#font_test_wrap {
	font-size: 12pt;
}

#font_test {
	visibility: hidden;
}

#out_test_log {
	font-size: 14pt;
	font-family: Consolas;
}

JavaScript

let fontsVerified = {
	'Arial' : [153, 316, 406, 389, 357, 355, 359, 272, 304, 337, 373, 321],
  'Cambria' : [141, 299, 397, 373, 413, 406, 381, 260, 290, 325, 356, 391],
  'Calibri' : [137, 282, 370, 352, 388, 380, 370, 381, 270, 297, 331, 359],
  'Consolas' : [182, 358, 380, 319, 407, 396, 255, 295, 330, 438, 486, 528],
  '"Courier New"' : [208, 380, 412, 352, 360, 240, 280, 320, 432, 480, 528, 576],
  '"Times New Roman"' : [131, 290, 376, 361, 390, 390, 380, 377, 278, 309, 342, 370],
  '"Palatino Linotype"' : [145, 292, 383, 366, 410, 380, 391, 392, 270, 301, 333, 360],
  'Roboto' : [148, 312, 386, 395, 355, 363, 364, 268, 302, 333, 369, 339]
};

let fonts = {
	'Arial' : [],
  'Cambria' : [],
  'Calibri' : [],
  'Consolas' : [],
  '"Courier New"' : [],
  '"Times New Roman"' : [],
  '"Palatino Linotype"' : [],
  'Roboto' : []
};

let fontTestElem = document.getElementById( 'font_test' );

let fontTestLog = Object.keys( fonts ).map( fnt => {
	let widths = [];
  fontTestElem.style.fontFamily = fnt;
  for( let i = 10; i <= 120; i += 10 ){
    fontTestElem.style.fontSize = i + "pt";
    fonts[ fnt ].push( fontTestElem.offsetWidth );
  }
  return fnt+' : '+ fonts[ fnt ].join( ', ' );
});

fontTestElem.style.fontSize = '12pt';

document.getElementById( 'out_test_log' ).innerHTML = fontTestLog.join( '<br>' );

for( let fnt in fonts ){
	if( fonts[ fnt ].some( (w, idx) => w !== fontsVerified[ fnt ][ idx ] ) ){
  	out_test_log.innerHTML += '<br>Font '+fnt+' absents in user fonts!';
  }else{
  	out_test_log.innerHTML += '<br>Font '+fnt+' is in user fonts!';
  }
}