FONT WIDGET SCRIPT

<!----- FONT WIDGET BY @BORNTOBEWILDCODES ----->

<script>
$(document).ready(function () {

$('#font-box-bttn').on('click',function () {
    $('#font-box').fadeToggle();
});

/* You need to insert div ids and classes of all heading elements inside the line:   #font-box-bttn, h1, h2, .title, #blogtitle, .quote    and separate them by commas. Optionally, remove those that your theme doesn't include. */

$('#accent-fontfamily').on('change', function() {
    $('#font-box-bttn, h1, h2, .title, #blogtitle, .quote').css("font-family", this.value);
});

$('#accent-fontsize').on("input", function() {
    var dInput = this.value;
    console.log(dInput);
    $('#font-box-bttn, h1, h2, .title, #blogtitle, .quote').css("font-size", dInput);
});

$('#accent-fontcolor').on("input", function() {
    var dInput = this.value;
    console.log(dInput);
    $('h1, h2, .title, #blogtitle, .quote').css("color", dInput);
});

/* You need to insert div ids and classes of all body elements inside the line:   body, #container, #posts, .entry, #sidebar, #header, #footer    and separate them by commas. Optionally, remove those that your theme doesn't include. */

$('#body-fontfamily').on('change', function() {
    $('body, #container, #posts, .entry, #sidebar, #header, #footer').css("font-family", this.value);
});

$('#body-fontsize').on("input", function() {
    var dInput = this.value;
    console.log(dInput);
    $('body, #container, #posts, .entry, #sidebar, #header, #footer').css("font-size", dInput);
});

$('#body-fontcolor').on("input", function() {
    var dInput = this.value;
    console.log(dInput);
    $('body, #container, #posts, .entry, #sidebar, #header, #footer').css("color", dInput);
});

});
</script>