How to change font style using drop-down list in JavaScript ? Last Updated : 03 Jun, 2020 Comments Improve Suggest changes Like Article Like Report To change or set a font style for certain text, the fontFamily CSS property needs to be changed. The fontFamily property sets or returns a list of font-family names for text in an element. Syntax: object.style.fontFamily = "font" To change the font style by option dropdown: The font values can be passed in option tags using option value. Syntax: <option value="value"> The value attribute specifies the value to be sent when a form is submitted. So after the value to be sent is selected, we set the fontFamily property for the text in the element to the selected value as specified in the above syntax. In the javascript function, here changeFontStyle(), the fontFamily property value is set to the font value of the option selected. By default, it is set to Times New Roman. Example: html <!DOCTYPE html> <html> <head> <title> Change Font Style by Option Dropdown Javascript </title> </head> <body style="text-align:center;"> <div id="output-text"> <h1 style="color:green;"> GeeksForGeeks </h1> </div> <select id="input-font" class="input" onchange="changeFontStyle (this);"> <option value="Times New Roman" selected="selected"> Times New Roman </option> <option value="Arial">Arial</option> <option value="fantasy">Fantasy</option> <option value="cursive">cursive</option> </select> <script> var changeFontStyle = function (font) { document.getElementById( "output-text").style.fontFamily = font.value; } </script> </body> </html> Output: Before selecting any option (Initial value - Times New Roman): After selecting an option in dropdown: After selecting another option in dropdown: Comment More infoAdvertise with us Next Article How to change font style using drop-down list in JavaScript ? S sayaliparulekar Follow Improve Article Tags : JavaScript Web Technologies JavaScript-Questions Similar Reads How to Change Font Size using drop-down List in JavaScript ? To change or set a font size for certain text, the fontSize property needs to be changed. The fontSize property sets or returns a list of fontSize names for text in an element.CSS font-size property is used to specify the font's height and size. It affects the size of an element's text. It has a med 2 min read How to Get Selected Value in Dropdown List using JavaScript? A dropdown list is an HTML element that allows users to select one option from a list of options. The <select> and <option> tags are used to create dropdown lists in HTML. In this article, we will see how to get selected value from dropdown list using JavaScript.Basic HTML Structure for 2 min read How to change font-weight of a text using JavaScript ? In this article, we will set the font-weight of a text dynamically using JavaScript. Ti change the font weight dynamically, we use HTML DOM Style fontWeight property. Syntax: object.style.fontWeight = "value" Property Values: normal: The font weight is the default value.lighter: The font weight is t 1 min read How to change Selected Value of a Drop-Down List using jQuery? We will change the default selected value of the dropdown using jQuery. In an HTML select tag, the default selected value is the value given to the first option tag. With jQuery, it is easy to change the selected value from a drop-down list. Below are the methods to change the selected value of a dr 3 min read JavaScript - How to Create Dropdown List? The dropdown list is a toggleable menu that allows to user to choose one option from multiple. The dropdown list is basically a button, when the user clicks on that, it expands downward and shows its sub-elements, from which users can select any one of them according to their preferences.Creating Dr 3 min read How to Change the Color of HTML Element in JavaScript? Changing the text color of an HTML element using JavaScript enhances the user experience by making content more interactive and visually engaging. By accessing and modifying the element's style properties through the DOM, we can dynamically update font colors based on user actions or events. For exa 2 min read How to change font size using jQuery ? In this article, we will see how to change the font size of an element using jQuery. To change the font size of an element, we will use css() method. The css() method is used to change the style property of the selected element. Syntax: $(selector).css(property) Return value: It will return the valu 1 min read How to Add Drop Down List in Table Cell ? Drop-downs are the user interface elements. Drop Down List is used to select one out of various options. This article focuses on creating a drop down list in the table cell which helps in selecting the choices directly from the table itself. Below are the approaches to add a Drop Down List in a Tabl 3 min read How to Change Font Style in CSS? Font style is an important element that enhances the readability of the text. CSS provides several properties to change the text appearance and font style. The font style property allows you to define how the text should appear normal, italic, or oblique.Table of ContentDifferent Methods to Change F 3 min read How to set all the font properties in one declaration using CSS ? In this article, we will learn how to set all the font properties in one declaration using CSS. This can be used for quickly setting the required font properties without specifying each of them separately. Approach: We will use the font property of CSS which is the shorthand property for all the fon 2 min read Like