[Solved] How to setup CSS for multiple font choices? [closed]

by


  1. Create a css selector for each theme:
.theme-time {
    font-family: "Times New Roman";
}
.theme-courier {
    font-family: "courier";
}
.theme-verdana {
    font-family: Verdana, sans-serif;
}
  1. Then, to give the ability to your user to change the theme and then the font-family, we will use Javascript. We will add one of this CSS class on the html or body tag.

HTML part (with a select) : 

<select id="theme-selector">
    <option value="theme-times">Times</option>
    <option value="theme-courier">Courier</option>
    <option value="theme-verdana">Verdana</option>
</select>

JavaScript part (with jQuery) :

// Detect when the value of the select change
$("#theme-selector").change(function() {
    // get the new theme name
    var theme = $(this).val();
    // We remove previous theme class
    // and add the new one
    $('body').removeClass((function (index, css) {
      return (css.match (/\s*theme-\S+/g) || []).join(' ');
    }).addClass(theme);
  });

solved How to setup CSS for multiple font choices? [closed]