How to change font style using drop-down list in JavaScript?

Javascript Web Development Front End Technology

We can use the style fontFamily property to change font style using drop-down list in JavaScript. To make the font change effective using the drop-down list, we can use onchange event when an option is selected in the drop down list.

Before we move further, let us know in detail about the drop-down list. A drop-down list is a switchable menu which enables the user to select the one item from a various option. These options can be defined using the HTML code, which are connected to a function. These functions are triggered and starts operating whenever you click or select this option.

Syntax

The following is the syntax for the fontFamily CSS property −

element.style.fontFamily = font

By using the fontFamily CSS property we can format the font of the text, option tag is used to store the font values and the syntax of option tag is as follows −

<option value="value">

Whenever the form gets submitted, the value attributes will specify the value. After selecting the sent value, we use the above-given syntax to specify the value and the font style. Changefontstyle() is used in JavaScript for changing the font style of a text, and Times Roman is set as default in the font style tab.

Steps

The following steps should be followed −

Step 1 − Create a drop-down list in HTML with a selection of font styles. Each option in the list should have a value corresponding to the font style you want to apply.
Step 2 − Select the element you want to apply the font style to using JavaScript.
Step 3 − Add an changeFontStyle to the drop-down list that listens for changes to the selected option.
Step 4 − Add an event listener to the drop-down list that listens for changes to the selected option.
Step 5 − When the event listener is triggered, from the drop-down list choose the font style which is selected.
Step 6 − Use JavaScript to set the font style of the element to the selected font style.
Step 7 − The style.fontFamily is the HTML DOM CSS property which is used to set or change the font family of the text.
Step 8 − If desired, add additional code to handle any other logic or functionality you want to implement.

Example

In these example, we are going to see how can we change the font style of the text using the dropdown list using the JavaScript.

<html>
<body>
   <div id="content">
      <h2 style="color:blue;">
         Font Style Changes After Selecting the Dropdown List
      </h2>
   </div>
   <select id="input" class="input" onchange="changingFontStyle (this);">
      <option value="Times New Roman" elected="selected">
         Times New Roman
      </option>
      <option value="Arial">Arial</option>
      <option value="fantasy">Fantasy</option>
      <option value="cursive">cursive</option>
   </select>
   <script>
      var changingFontStyle = function (fontstyle) {
         document.getElementById("content").style.fontFamily = fontstyle.value;
      }
   </script>
</body>
</html>

Example

Let us see another example where we use event listener to the dropdown list for changing the font style of the text for the selected options.

<html>
<head>
   <style>
      .Arial{
         font-family: Arial;
      }
      .Algerian{
         font-family: Algerian;
      }
      .Berlin-sans-fb{
         font-family: 'Berlin sans fb';
      }
      .Times-new-roman{
         font-family: 'Times New Roman';
      }
   </style>
</head>
<body>
   <div> <h3>Style of the Text Changes with the drop down</h3> </div>
   <div id="output-text">
      Hi Guys, Welcome to Javascript Program
   </div>
   <div>
      <select id="input-font" class="input" onchange="changingFont (this);">
      <option value="Times-new-roman" selected="selected">Times New Roman</option>
      <option value="Arial">Arial</option>
      <option value="Algerian">Algerian</option>
      <option value="Berlin-sans-fb">Berlin Sans FB</option>
      <option value="bold" class="bolder">Tebal</option>
      </select>
   </div>
   <script>
   var changingFont = function(fontstyle) {
      console.log(fontstyle.value)
      document.getElementById("output-text").className = "text-center " + fontstyle.value;
   }
   </script>
</body>
</html>

In this article, we have demonstrated how can we change the font-style using dropdown list along with examples. We have seen the examples here, where the fontFamily CSS property and changeFontStyle will be used to change or set the font style whenever we select the options from the dropdown list.