JSFiddle - React, Tailwind, and code Playground

by evan

HTML

<input type="text" value="Open Sans" /> &lt;-- Enter a font name or leave blank to be prompted!
<br /><br />
<a href="">Shift for Font</a> &lt;-- Drag this to your bookmarks bar!

<script type="text/bookmarklet" id="bookmarkletsource">
    if (!$j) {
        alert('Sorry, this only works on LivePlan.');
    } else {
        var font = '{font}' || prompt('Enter a font family');
        var rule = 'body.fonted * {font-family: zzzfont !important;}'.replace("zzzfont", font);
        var style = $j('<style />', {type: 'text/css'});
        style.appendTo(document.body);
        style.get(0).sheet.insertRule(rule, 0);
        $j(document.body).on('keyup keydown', function (e) {
            $j(document.body)[e.shiftKey ? 'addClass' : 'removeClass']('fonted');
        });
    }
</script>

JavaScript

$(function () {
    var source = $('#bookmarkletsource').html();
    
    $('input').on('keyup', function () {
        var sourceWithFont = source.replace('{font}', $(this).val());
        $('a').prop('href', 'javascript:' + sourceWithFont);
    });
    
    $('input').trigger('keyup');

});