Set a bunch of fonts and switch them onclick.

choose_font.js

function injectcss() {
	var fontFiles = [
		"lmroman10-bold.otf",
		"lmromancaps10-regular.otf"
		],
		fontLinks = "<link href='http://fonts.googleapis.com/css?family=Playfair+Display' rel='stylesheet' type='text/css'>	\n ",
		ffName = [
		"LMRoman Regular",
		"LMRoman Bold"
		],
		webFontName = [
		"Playfair Display",
		
		];
		
		
	var font = ffName.concat(webFontName);
	console.log(font);
	var css = "";
	
	for (i = 0; i < ffName.length; i++) {
		css = css + "@font-face {\n font-family: " + ffName[i] + "; \n src: url(\"font/" + fontFiles[i] + "\"); \n}\n";
	}
	
	var head = document.getElementsByTagName("head")[0];
		style = document.createElement("style");
		style.setAttribute("type", "text/css");
		style.appendChild(document.createTextNode(css));
		head.appendChild(style);
		head.innerHTML += fontLinks;
	
	var fontIndex = 0;	
	function setFont() {
		chooseFont.style.fontFamily = font[fontIndex];
		if (fontIndex < font.length - 1) {
			fontIndex++;
		} else {
			fontIndex = 0;
		}
	}
	
	var	chooseFont = document.getElementsByClassName("chooseFont")[0];
		
		chooseFont.onclick = setFont;
}


window.onload = injectcss;