Hey there, I've got a div containing text that changes based on the font selected from a dropdown list I created. Currently, my font options are limited because I have to manually add them one by one.
Is there a way to dynamically populate the font list with all the installed fonts on the user's computer using code, rather than manually adding each one?
HTML
<div id="generate">
Change the text!
</div>
<select id="box" onchange="font();">
<option id="PIC" value="Choose a font">Choose a font.</option>
<option id="TNR" value="TimesNewRoman">Times New Roman</option>
<option id="GRG" value="Georgia">Georgia</option>
<option id="PLT" value="PalatinoLinotype">Palatino Linotype</option>
<option id="ARL" value="Arial">Arial</option>
<option id="CMS" value="ComicSans">Comic Sans</option>
<option id="IMP" value="Impact">Impact</option>
<option id="TMS" value="TrebuchetMS">Trebuchet MS</option>
<option id="TSB" value="TheSansBlack">The Sans Black Plain</option>
</select><br />
Javascript
function font() {
var sf = document.getElementById('box').value;
var generate = document.getElementById('generate');
switch(sf){
case 'TimesNewRoman':
generate.style.fontFamily = ('Times New Roman')
break;
case 'Georgia':
generate.style.fontFamily = ('Georgia')
break;
case 'PalatinoLinotype':
generate.style.fontFamily = ('Palatino Linotype')
break;
case 'Arial':
generate.style.fontFamily = ('Arial')
break;
case 'ComicSans':
generate.style.fontFamily = ('Comic Sans MS')
break;
case 'Impact':
generate.style.fontFamily = ('Impact')
break;
case 'TrebuchetMS':
generate.style.fontFamily = ('Trebuchet MS')
break;
default: generate.style.fontFamily = ('')
}
}