How to set the font family for text with JavaScript?

Javascript Web Development Front End Technology

In this tutorial, we will learn how to set the font family for text with JavaScript.

The font-family is a CSS property that specifies a prioritized list containing one or more font family names and generic family names for the text of an HTML element. To set the font-family for text with JavaScript, we have multiple ways, and in this tutorial, we will discuss two of them −

Using the style.fontFamily Property
Using the style.setProperty Method

Using the style.fontFamily Property

The style.fontFamily property sets a list of font family names and/or generic family names for the text. The browser will set the first value from the list that it recognizes. The element object contains this property, so first, the document.getElementById() method is used to access the element object, and then we use the style.fontFamily property to set the font family for text with JavaScript.

Syntax

const element = document.getElementById('id')
element.style.fontFamily = family_name | generic_family | inherit | initial

In the above syntax, the ‘id’ is the id of an element. Using the document.getElementById() method we are accessing that element object and set the style.fontFamily property.

Parameters

family_name − The name of one or multiple font families.
generic_family − The name of one or multiple generic families.
inherit − The font-family property is inherited by its parent element’s property.
initial − The font-family property is set to default.

Example

In the below example, we have used the style.fontFamily property to set the font family for text with JavaScript. We have used a button “Set Font Family” click event to execute the “setFontFamily()” function that sets the font-family property of multiple elements.


<html>
<head>
   <style>
      div {
         padding: 10px;
         margin: 5px 0px;
         background-color: aliceblue;
      }
   </style>
</head>
<body>
   <h3> Set the font family for text using <i> style.fontFamily property </i> with JavaScript </h3>
   <button onclick="setFontFamily()"> Set Font Family </button>
   <br /><br />
   <div id="text1"> This text will use Arial font family </div>
   <div id="text2"> This text will use cursive font family </div>
   <div id="text3"> This text will use Helvetica, sans-serif font family </div>
   <div id="text4"> This text will use Georgia, serif font family </div>
   <script>
      
      // 'Set Font Family' button click event handler function
      function setFontFamily() {
         
         // all text elements
         const text1 = document.getElementById('text1')
         const text2 = document.getElementById('text2')
         const text3 = document.getElementById('text3')
         const text4 = document.getElementById('text4')
         
         // Set the font-family property using the style.fontFamily property
         text1.style.fontFamily = 'Arial'
         text2.style.fontFamily = 'cursive'
         text3.style.fontFamily = 'Helvetica, sans-serif'
         text4.style.fontFamily = 'Georgia, serif'
      }
   </script>
</body>
</html>

Using the style.setProperty Method

In JavaScript, any new or existing property of an HTML element can be set using the style.setProperty method. The style.setProperty method is a part of the element object, so to use this method, we need to access the element object using the document.getElementById() method and then we can use this method. In the property name parameter of the style.setProperty method, it should be ‘font-family’, and the value and priority will be as per the user.

Syntax

const element = document.getElementById('id')
element.style.setProperty(property_name, value, priority)

In the above syntax, we access the element object of an HTML element that has an id of ‘id’ using the document.getElementById() method and then use the style.setProperty method.

Parameters

property_name − The name of the property to be set.
value − The new value of the property.
priority − The priority of the property value (Optional).

Example

In the below example, we have used the style.setProperty method to set the font family for text with JavaScript. We have used an input field to take the user’s input for the list of font families. A button, “Set Font Family” is associated with a click event that executes the “setFontFamily()” function, which sets the font family of an element.


<html>
<head>
   <style>
      div {
         padding: 10px;
         margin: 5px 0px;
         background-color: aliceblue;
      }
   </style>
</head>
<body>
   <h2> Set the font family for text using <i> style.setProperty method </i> with JavaScript </h2>
   <h4>Enter the list of font-families to set:</h4>
   <input id="fonts" type="text" name="fonts" value="sans-serif">
   <button onclick="setFontFamily()"> Set Font Family </button>
   <br /><br />
   <div id="text"> This text will change it's font family according to the user's input! </div>
   <script>
      
      // 'Set Font Family' button click event handler function
      function setFontFamily() {
         const text = document.getElementById('text')
         
         // input field's value
         const fonts = document.getElementById('fonts').value
         
         // Set the font-family property using the style.setProperty method
         text.style.setProperty('font-family', fonts)
      }
   </script>
</body>
</html>

In this tutorial, we learned how to set the font family for text with JavaScript. We have seen two ways to set the font family using the style.fontFamily property and using the style.setProperty method. Users can follow these approaches to set the font family for text.