Change font of webpage via dropdownbox

Question

I'm wanting to have a drop down box on my page, When you click one of the fonts it would change the sites fonts,

I tried the code below however it did nothing. Any ideas?

Sam

Css

.font1 p { font-family: "Times New Roman", Times, Serif;  }
.font1 h1 { font-family: "Times New Roman", Times, Serif;   }
.font1 h2 { font-family: "Times New Roman", Times, Serif;   }
.font1 h3 { font-family: "Times New Roman", Times, Serif;  }
.font1 h4 { font-family: "Times New Roman", Times, Serif;  }
.font1 h5 { font-family: "Times New Roman", Times, Serif;  }
.font1 h6 { font-family: "Times New Roman", Times, Serif;  }
.font1 th {font-family: "Times New Roman", Times, Serif;  }
.font1 tr {font-family: "Times New Roman", Times, Serif; }

.font2 p { font-family: Arial, Helvetica, sans-serif;  }
.font2 h1 { font-family: Arial, Helvetica, sans-serif;   }
.font2 h2 { font-family: Arial, Helvetica, sans-serif;   }
.font2 h3 { font-family: Arial, Helvetica, sans-serif;  }
.font2 h4 { font-family: Arial, Helvetica, sans-serif;  }
.font2 h5 { font-family: Arial, Helvetica, sans-serif;  }
.font2 h6 { font-family: Arial, Helvetica, sans-serif;  }
.font2 th {font-family: Arial, Helvetica, sans-serif;  }
.font2 tr {font-family: Arial, Helvetica, sans-serif; }
</style>

Html

<div>
      <select>
        <option value="Choose a font">Choose a Font</option>
        <option value="Font1" ng-click="font1">Font1</option>
        <option value="Font2" ng-click="font2">Font2</option>
        <option value="Font3" ng-click="font3">Font3</option>
        <option value="Font4" ng-click="font4">Font4</option>
      </select>
      </div>

Answer 1

As I said in the comments, it might be much easier just to modify the font family (or a class) on a container element (body in my example), rather than creating duplicate CSS styles for each font version.

Here's a super-simple example I quickly sketched for you. It modifies the font family property of body:

angular.module('app', [])
.controller('Ctrl', function($scope) {
  $scope.changeFont = function(){
    document.body.style.fontFamily = $scope.font;
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="Ctrl">
  <select ng-model="font" ng-change="changeFont(this.value)">
    <option value="Times New Roman">Font1</option>
    <option value="Arial">Font2</option>
    <option value="sans">Font3</option>
  </select>
</div>
<p>Some text outside the controller</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et velit id dui dapibus vulputate. Nunc scelerisque orci et tortor congue, vitae feugiat eros bibendum. Nam tincidunt vitae neque nec tempus. Integer tempor gravida tellus bibendum ornare. Nulla facilisi. Etiam sodales feugiat mollis. Mauris vitae sem nibh. Cras id nunc congue, tempus augue sed, tincidunt massa. Praesent sodales libero id facilisis eleifend. Nunc finibus tempus dui. Aenean lacus mi, euismod sed lacus a, semper vulputate massa.</p>

---

The class approach - it changes the class of body:

angular.module('app', [])
.controller('Ctrl', function($scope) {
  $scope.changeFont = function(){
    document.body.className = $scope.font;
  }
})

.font1 {font-family: Times New Roman}
.font2 {font-family: Arial}
.font3 {font-family: sans}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="Ctrl">
  <select ng-model="font" ng-change="changeFont(this.value)">
    <option value="font1">Font1</option>
    <option value="font2">Font2</option>
    <option value="font3">Font3</option>
  </select>
</div>
<p>Some text outside the controller</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et velit id dui dapibus vulputate. Nunc scelerisque orci et tortor congue, vitae feugiat eros bibendum. Nam tincidunt vitae neque nec tempus. Integer tempor gravida tellus bibendum ornare. Nulla facilisi. Etiam sodales feugiat mollis. Mauris vitae sem nibh. Cras id nunc congue, tempus augue sed, tincidunt massa. Praesent sodales libero id facilisis eleifend. Nunc finibus tempus dui. Aenean lacus mi, euismod sed lacus a, semper vulputate massa.</p>

Answer 2

You need to add an onchange event function to the <select> tag that sets the body's class to one of the font classes each time the select tag's option changes.

var fontChooser = document.getElementById ('fontChooser');

fontChooser.onchange = function () {
    document.body.className = this.value;
};

See here for full code: http://jsfiddle.net/0fvzvtve/