JSFiddle - React, Tailwind, and code Playground

HTML

<p>This is an <span class="output">answer</span> to a Stack Overflow <span class="output">question</span>. It <span class="output">randomizes</span> <span class="output">fonts</span>.</p>

CSS

.font1 {font-family:Verdana, Geneva, sans-serif;}
.font2 {font-family:Georgia, "Times New Roman", Times, serif;}
.font3 {font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;}
.font4 {font-family:"Times New Roman", Times, serif;}
.font5 {font-family:"Comic Sans MS", cursive;}

JavaScript

window.addEventListener('load', run, false);
document.addEventListener('DOMContentLoaded', run, false);

var ran = false;
var weights = ['normal', 'bold', 'lighter'];
var sizes = ['16px', '20px', '24px', '36px', '40px'];

function choose(array) {
    return array[Math.floor(Math.random() * array.length)];
}

function run() {
    if(ran) {
        return;
    }else{
        ran = true;
    }
    var outputs = document.getElementsByClassName('output');
    for(var i = 0, l = outputs.length; i < l; i++) {
        var output = outputs[i];
        output.style.fontSize = choose(sizes);
        output.style.fontWeight = choose(weights);
        output.className += ' font' + Math.floor(
            Math.random() * 5 + 1);
    }
}