JSFiddle - React, Tailwind, and code Playground

by CJ Juarez

HTML

<body>
	<form id="texteditor">
		<select id="font">
			<option value="Spirax">Spirax</option>
			<option value="SansitaOne">SansitaOne</option>
			<option value="oliver">oliver</option>
			<option value="JuraLight">Jura-Light-webfont</option>
			<option value="Jura">Jura-DemiBold-webfont</option>
			<option value="DJGROSS">DJGROSS-webfont</option>
			<option value="College">College</option>
			<option value="BYekan">BYekan</option>
			<option value="BRoya">BRoya</option>
			<option value="BMitraBold">BMitraBold</option>
			<option value="BMitra">BMitra</option>
		</select>
		<select id="size">
			<option value="7">7</option>
			<option value="10">10</option>
			<option value="15">15</option>
			<option value="17">17</option>
			<option value="40">40</option>
		</select>
	</form>
	<textarea class="changeme">this is my text example !!!</textarea>
</body>

CSS

@font-face {
  font-family: 'Spirax';
  font-style: normal;
  font-weight: 400;
  src: local('Spirax-Regular'), url(https://fonts.gstatic.com/s/spirax/v5/iZydx-PXNWXEmZsjO9Z6Pw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
	font-family: 'BMitraBold';
	src: url('font/BMitraBold.eot?') format('eot'), 
	     url('font/BMitraBold.otf')  format('opentype'),
	     url('font/BMitraBold.woff') format('woff'), 
	     url('font/BMitraBold.ttf')  format('truetype'),
	     url('font/BMitraBold.svg#MyriadPro-Regular') format('svg');
}
@font-face {
	font-family: 'BRoya';
	src: url('font/BRoya.eot?') format('eot'), 
	     url('font/BRoya.otf')  format('opentype'),
	     url('font/BRoya.woff') format('woff'), 
	     url('font/BRoya.ttf')  format('truetype'),
	     url('font/BRoya.svg#MyriadPro-Regular') format('svg');
}
@font-face {
	font-family: 'BYekan';
	src: url('font/BYekan.eot?') format('eot'), 
	     url('font/BYekan.otf')  format('opentype'),
	     url('font/BYekan.woff') format('woff'), 
	     url('font/BYekan.ttf')  format('truetype'),
	     url('font/BYekan.svg#MyriadPro-Regular') format('svg');
}
@font-face {
	font-family: 'College';
	src: url('font/College.eot?') format('eot'), 
	     url('font/College.otf')  format('opentype'),
	     url('font/College.woff') format('woff'), 
	     url('font/College.ttf')  format('truetype'),
	     url('font/College.svg#MyriadPro-Regular') format('svg');
}
@font-face {
	font-family: 'DJGROSS';
	src: url('font/DJGROSS-webfont.eot?') format('eot'), 
	     url('font/DJGROSS-webfont.otf')  format('opentype'),
	     url('font/DJGROSS-webfont.woff') format('woff'), 
	     url('font/DJGROSS-webfont.ttf')  format('truetype'),
	     url('font/DJGROSS-webfont.svg#MyriadPro-Regular') format('svg');
}
@font-face {
	font-family: 'Jura';
	src: url('font/Jura-DemiBold-webfont.eot?') format('eot'), 
	    ...

JavaScript

$("#font").change(function() {
    $('.changeme').css("font-family", $(this).val());

});

$("#size").change(function() {
    $('.changeme').css("font-size", $(this).val() + "px");
});