<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<select id="font">
<option selected value="">Default</option>
<option>Marck Script</option>
<option>Seymour One</option>
</select>
<div id="sample">
Как сделать для пользователя сайта возможность выбора шрифта из списка (выпадающий список/чекбокс), и мгновенного изменения шрифта для уже введенного текста. Шрифты из google fonts.
</div>
<script>
(function(){
var url = "http://fonts.googleapis.com/css?family={family}&subset=latin,cyrillic";
var link = document.createElement('link');
link.rel = 'stylesheet';
document.getElementsByTagName('head')[0].appendChild(link);
var font = document.getElementById('font');
var sample = document.getElementById('sample');
font.onchange = function() {
var family = this.value;
if (family) {
link.href = url.replace('{family}', encodeURIComponent(family));
}
sample.style.fontFamily = family;
};
})()
</script>
</body>
</html>