Font family checker

by itzmeamar

CSS

body {
    margin: 10px; max-width: 900px; background: #eee;
    font-family: KozGoPro-Regular, 'Hiragino Kaku Gothic Pro', meiryo, sans-serif;
}

select { min-width: 90%; }

pre code { display: block; background: #fff; overflow-x: auto; padding: 3px; margin: 0.5em 0; }
textarea{ min-height: 21em; width: 100%; resize: vertical; }
select, textarea, pre code { border: 1px solid #000; }

JavaScript

var fontSet = [
    "",
    "sans-serif",
    "serif",
    "courier, 'courier new', Monospase",
    "Arial, Helvitica, Sans-serif",
    "'segoe ui', meiryo, sans-serif",
    "",
    "",
    "",
    ""
    ];

var fontSelector = document.createElement("select");
var option = [];

for (i = 0; i < fontSet.length; i++) {
    option[i] = document.createElement("option");
    option[i].value = i;
    option[i].innerHTML = fontSet[i];
    fontSelector.appendChild(option[i]);
}

document.body.appendChild(fontSelector);

var pre = document.createElement("pre");
var code = document.createElement("code");
code.innerHTML = " ";
pre.appendChild(code);
document.body.appendChild(pre);

var preview = document.createElement("textarea");
preview.innerHTML = "abcdefghijklmnopqrstuvwxyz\n" + "ABCDEFGHIJKLMNOPQRSTUVWXYZ\n";

document.body.appendChild(preview);

fontSelector.onchange = setFontFamily;

function setFontFamily() {
    preview.style.fontFamily = fontSet[this.value];
    code.innerHTML = "font-family: " + fontSet[this.value];
}