JSFiddle - React, Tailwind, and code Playground

HTML

<p id="text">
    &#x25a2; I have eaten lunch<br>
    &#x25a2;&nbsp;&nbsp;I have eaten lunch<br>
    &#x25fb; I drank some tea today<br>
    &#x274f; Earn a lot of money<br>
    &#x2751; And write a book<br>
    &#x2610; And exercise every day<br>
    &#x2611; And take a look at http://jsfiddle.net/S2QCt/16/
</p>

<p>
    <form>
        <label><input type="radio" name="font"> Arial</labeL><br>
        <label><input type="radio" name="font"> Georgia</labeL><br>
        <label><input type="radio" name="font"> Lucida Grande</labeL><br>
        <label><input type="radio" name="font"> Lucida Sans Unicode</labeL><br>
        <label><input type="radio" name="font"> Monaco</labeL><br>
        
        <label><input type="radio" name="font"> Times New Roman</labeL><br>
        <label><input type="radio" name="font"> Verdana</labeL><br>
    </form>
</p>

CSS

#text { padding-bottom: 20px; border-bottom: 1px dotted #ccc; margin-bottom: 20px }

JavaScript

$('form input').each(function() {
    $(this).click(function() {
        $('#text').css({'font-family': $(this).parent().text()})
    });
});

$(function() {
    $('form input').first().click()
})