JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<div id="test" >Test</div>

<div id="fontfamily"></div>
<input id="btn" type=button value="show font family" >

</body>
</html>

CSS

#test {
  font-family: Lato-Black;
}

JavaScript

(function(win) {
	
	var style = null;
	function createClass(name,rules){
		if (typeof(rules)!="string") {
			rules = JSON.stringify(rules).trim();
		}
	
		if (rules.startsWith("{")&&rules.endsWith("}")) {
			rules = rules.substring(1,rules.length-1);
		}
		
		if (style==null) {
		    style = document.createElement('style');
		    style.type = 'text/css';
		    var head = document.getElementsByTagName('head');
		    if (head.length=0) {
		    	var h = document.createElement('head');
		    	document.insertBefore(h,document.body);
		    	head = [h];
		    }
		    head[0].appendChild(style);
		}
		
		
		var rule;
	    if(!(style.sheet||{}).insertRule) {
	    	rule = (style.styleSheet || style.sheet).addRule(name, rules);
	    } else {
	    	style.sheet.insertRule(name+"{"+rules+"}",0);
	    	rule = style.sheet
	    }
	    return rule;
	}
	
	function removeNode(node) {
		if (node.remove) {
			node.remove();
		} else {
			var pn = node.parentElement;
			if (pn!=null) {
				pn.removeChild(node);
			}
		}
	}
	

	
	createClass("@font-face", "{ font-family: 'void';  src:...