Question

How can I allow users of my website to edit the font family?

I want a drop down on a page that changes the font of the site. It should happen instantly, not needing a button click if possible.

How do I do this?

Was it helpful?

Solution

Improving - try this little jQuery

<html>
    <head><title>Test</title></head>
    <body style="font-family: Helvetica;">
        <select name="ListMenuId" id="ListMenuId">
            <option value="">Change this</option>
            <option value="1">This change the font family to Verdana</option>
        </select>

        <select name="ListMenu2" id="ListMenu2">
            <option value="">Change for selected font-family</option>
            <option value="Verdana">This change the font family to Verdana</option>
            <option value="Arial">This change the font family to Arial</option>
            <option value="Helvetica">This change the font family to Helvetica</option>
            <option value="Times New Roman">This change the font family to Times New Roman</option>
        </select>
    </body>

<script type="text/javascript">
$(function(){
    $('#ListMenuId').change(function(){
        $('body').css('font-family', 'Verdana'); // Specific font-family        
    });

    $('#ListMenu2').change(function(){
        $('body').css('font-family', $(this).val()); // Gets font-family from list menu option value    
    });
});
</script>
</html>

OTHER TIPS

You can use jQuery to do this easily:

$("body").css("font-family","Arial"); 
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top