Switch up the webpage's font using a dropdown selection box

Question

Switch up the webpage's font using a dropdown selection box

I'm interested in adding a drop-down box to my webpage that allows users to change the font of the site when they click on it.

I attempted the code below, but it didn't seem to work. Any suggestions?

Regards, 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>

html css angularjs

Answer 1

Answer №1

In order to dynamically change the font style of a webpage, you must include an onchange event function within the <select> tag. This function will update the body's class based on the selected option from the dropdown menu.

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

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

To view the complete code example, visit: http://jsfiddle.net/0fvzvtve/

Answer 2

In order to dynamically change the font style of a webpage, you must include an onchange event function within the <select> tag. This function will update the body's class based on the selected option from the dropdown menu.

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

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

To view the complete code example, visit: http://jsfiddle.net/0fvzvtve/

Answer 3

Answer №2

Instead of creating duplicate CSS styles for each font version, consider modifying the font family (or a class) on a container element like the body, as suggested in the comments.

Below is a simple example that demonstrates how you can change the font family property of the 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>

Another approach is to change the class of the 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 4

Instead of creating duplicate CSS styles for each font version, consider modifying the font family (or a class) on a container element like the body, as suggested in the comments.

Below is a simple example that demonstrates how you can change the font family property of the 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>

Another approach is to change the class of the 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>

Switch up the webpage's font using a dropdown selection box

Answer №1

Answer №2

Similar questions

Tips for managing an outdated AngularJS 1.5.5 application

My goal is to create collapsible and expandable rows within this table

Place images within a card container using Bootstrap 4

The integration of routing between ASP.NET MVC and Angular is not functioning properly

One effective way to redirect after a PUT request and display a one-time message

Using jQuery to trigger a Bootstrap modal when a button is clicked

Can a single volume control be used to manage the audio of multiple sources at once?

Having trouble displaying Django CreateView forms on your HTML page?

Incorporate the stylish PayPal icon from Font Awesome into the PayPal code

The background of the webpage section is being cropped on mobile devices

What is the best way to combine two JSON objects within the same array based on their IDs located in another array?

Leveraging the power of javascript to include content before and after

Exploring the data from selected directives within AngularJS

What is the best way to retrieve the href and id values dynamically from a card in React JS?

Issue: [Fatal Error] AngularJS v1.7 and Jasmine

Distinct index.html file for Angular application

Dompdf is outputting the HTML Bootstrap code as col-sm-x instead of col-lg-x

Avoid using the FONT tag with the execCommand function

Expanding the content of :before

The mobile devices do not display minuscule text when rendering the React responsive UI