JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<div id="demo-container">
	<div id="demo-text">The current font is Tahoma</div>
	<button id="download-font">Download &amp; Change Font</button>
</div>

CSS

#demo-text {
    text-align: center;
    font-size: 20px;
    font-family: Tahoma;
    margin: 20px 0 20px 0;
}
@font-face {
  font-family: "Miama";
  src: url("Miama.otf");
  }

JavaScript

var request = new XMLHttpRequest();
    
request.addEventListener('readystatechange', function(e) {
	if(request.readyState == 2 && request.status == 200) {
		// Download is being started
	}
	else if(request.readyState == 3) {
		// Download is under progress
	}
	else if(request.readyState == 4) {
		// Downloading has finished

		// request.response holds the binary data of the font

		var junction_font = new FontFace('Junction Regular', request.response);
		junction_font.load().then(function(loaded_face) {
			document.fonts.add(loaded_face);
		  	document.body.style.fontFamily = '"Junction Regular", Arial';
		}).catch(function(error) {
			// error occurred
		});
	}
});

request.addEventListener('progress', function(e) {
	var percent_complete = (e.loaded / e.total)*100;
	console.log(percent_complete);
});

request.responseType = 'arraybuffer';

// Downloading a font from the path
request.open('get', 'fonts/junction-regular.woff'); 

request.send();