Javascript style font name

Style fontStyle Property

The fontStyle property sets or returns whether the style of the font is normal, italic or oblique.

Browser Support

Syntax

Return the fontStyle property:

Set the fontStyle property:

Property Values

Value	Description
normal	Font is normal. This is default
italic	Font is in italic
oblique	Font is in oblique
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

Technical Details

Default Value:	normal
Return Value:	A String, representing the font style of the text in the element
CSS Version	CSS1

More Examples

Example

A demonstration of possible values:

var listValue = selectTag.options[selectTag.selectedIndex].text;
document.getElementById(«demo»).style.fontStyle = listValue;

Example

Return the font style of an element:

Related Pages

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

Style font Property

The font-size and font-family are required. If one of the other values are missing, the default values will be inserted, if any.

The properties above can also be set with separate style properties. The use of separate properties is highly recommended for non-advanced authors for better controllability.

Browser Support

Syntax

object.style.font = «font-style font-variant font-weight font-size/line-height|caption|icon|menu|
message-box|small-caption|status-bar|initial|inherit;»

Property Values

Value	Description
style	Sets the font-style
variant	Sets the text in a small-caps font
weight	Sets the boldness of the font
size	Sets the size of the font
lineHeight	Sets the distance between lines
family	Sets the font face
caption	The font used for captioned controls (like buttons, drop-downs, etc.)
icon	The font used to label icons
menu	The font used in menus
message-box	The font used in dialog boxes
small-caption	The font used in small controls
status-bar	The font used in window status bars
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

Technical Details

Default Value:	not specified
Return Value:	A String, representing different font properties of the element
CSS Version	CSS1

More Examples

Example

Return the font of an element:

Источник

Style fontFamily Property

Tip: Always specify a generic-family name as the last alternative!

Note: Separate each value with a comma.

Note: If a font-family name contains whitespace, it must be quoted.

Tip: Look at Web safe fonts for commonly used font combinations.

Browser Support

Syntax

Return the fontFamily property:

Set the fontFamily property:

Property Values

Value	Description
font1, font2, etc.	A comma-separated list of font-family names and/or generic-family names
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

Technical Details

Default Value:	not specified
Return Value:	A String, representing the font name of the text in the element
CSS Version	CSS1

More Examples

Example

A demonstration of possible values:

var listValue = selectTag.options[selectTag.selectedIndex].text;
document.getElementById(«demo»).style.fontFamily = listValue;

Example

Return the font of an element:

Related Pages

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

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

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.

Источник

Javascript Reference — HTML DOM Style fontFamily Property

The font-family in CSS controls which font to use in HTML document. For example, we can set font-family to Arial.

We can set many optional font names for font-family in CSS, the browser will use the first value it recognizes in the website visitor’s system.

There are two types of font-family values:

• font-family: name of a font-family, like «verdana» or «arial»
• generic-family: name of a generic font-family, like «serif» or «sans-serif»

We must separate each font name with a comma, and add quotates to font-family name with whitespace.

The fontFamily property sets or gets a list of font-family names or generic-family names in Javascript.

Browser Support

fontFamily	Yes	Yes	Yes	Yes	Yes

Syntax

Return the fontFamily property:

var v = object.style.fontFamily

Set the fontFamily property:

object.style.fontFamily='font1, font2, etc.|initial|inherit' 

Property Values

Value	Description
font1, font2, etc.	font-family names or generic-family names
initial	Sets to default value.
inherit	Inherits from parent element.

Technical Details

Example

A demonstration of possible font names.

 !DOCTYPE html> html> body> !--from ww w .ja v a 2 s . c om--> p >"myP">This is a paragraph. select onchange="myFunction(this);" size="13"> option>Georgia option>Palatino Linotype option>Book Antiqua option>Times New Roman option>Arial option>Helvetica option>Arial Black option>Impact option>Lucida Sans Unicode option>Tahoma option>Verdana option>Courier New option>Lucida Console  script> function myFunction(selectTag) < var listValue = selectTag.options[selectTag.selectedIndex].text; document.getElementById("myP").style.fontFamily = listValue; >   

The code above is rendered as follows:

Example 2

The following code shows how to set the font name.

 !DOCTYPE html> html> body> p >"myP">This is a paragraph. button type="button" onclick="myFunction()">test script> function myFunction() !--from ww w . j av a2s.c o m--> document.getElementById("myP").style.fontFamily = "Impact,Charcoal,sans-serif"; >   

The code above is rendered as follows:

Example 3

The following code shows how to get the font name.

 !DOCTYPE html> html> body> p >"myP" style="font-family:Arial,Helvetica,sans-serif;">This is a paragraph. button type="button" onclick="myFunction()">test script> function myFunction() !--from w w w .j av a2 s .com--> console.log(document.getElementById("myP").style.fontFamily); >   

The code above is rendered as follows:

java2s.com | © Demo Source and Support. All rights reserved.

Источник