Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to set the font family for text with JavaScript?
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.
6K+ Views
