HTML DOM Style font Property

# Style font Property

Style Object

## Example

Set the font for a <p> element:

document.getElementById("myP").style.font="italic bold 20px arial,serif";
Try it yourself »

## Definition and Usage

The font property sets or returns up to six separate font properties, in a shorthand form.

With this property, you can set/return the following (in this order):

- font-style
- font-variant
- font-weight
- font-size
- line-height
- font-family

The font-size and font-family are required. If one of the other valeus 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

The font property is supported in all major browsers.

## Syntax

Return the font property:

object.style.font

Set the font property:

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 a <p> element:

alert(document.getElementById("myP").style.font);
Try it yourself »

## Related Pages

CSS tutorial: CSS Font

CSS reference: font property

Style Object

### WEB HOSTING

UK Reseller Hosting

### WEB BUILDING

FREE Website BUILDER Free HTML5 Templates

### W3SCHOOLS EXAMS

HTML, CSS, JavaScript, PHP, jQuery, XML, and ASP Certifications

### SHARE THIS PAGE

### Color Picker

### HTML/CSS

HTML Tutorial HTML5 Tutorial CSS Tutorial CSS3 Tutorial Bootstrap Tutorial

### JavaScript

JavaScript Tutorial jQuery Tutorial jQuery Mobile Tutorial AngularJS Tutorial AJAX Tutorial JSON Tutorial

### Graphics

Canvas Tutorial SVG Tutorial Google Maps Tutorial

### Server Side

SQL Tutorial PHP Tutorial ASP Tutorial ASP.NET Tutorial VBScript Tutorial AppML Tutorial

### Web

Web Building Web Statistics Web Certification

### XML

XML Tutorial DTD Tutorial Schema Tutorial XML DOM Tutorial XPath Tutorial XSLT Tutorial XQuery Tutorial XSL-FO Tutorial RSS Tutorial WSDL Tutorial

### HTML/CSS

HTML Tag Reference HTML Event Reference HTML Color Reference CSS 1,2,3 Reference Bootstrap Reference

### JavaScript

JavaScript Reference HTML DOM Reference jQuery Reference jQuery Mobile Reference Google Maps Reference

### Server Side

PHP Reference SQL Reference ASP Reference VBScript Reference Razor Reference ASP.NET Reference

### XML

XML DOM Reference XSLT Reference XSL-FO Reference XPath Reference XQuery Reference Schema Reference RSS Reference SVG Reference

### HTML Charsets

HTML Character Sets HTML ASCII HTML ANSI HTML Windows-1252 HTML ISO-8859-1 HTML Symbols HTML UTF-8

### HTML/CSS

HTML Examples CSS Examples

### Browser Scripting

JavaScript Examples HTML DOM Examples jQuery Examples jQuery Mobile Examples AngularJS Examples AJAX Examples

### Server Scripting

PHP Examples ASP Examples VBScript Examples Razor Examples .NET Examples

### XML Languages

XML Examples DTD Examples XML DOM Examples XSL Examples XSLT Examples XPath Examples XQuery Examples Schema Examples RSS Examples SVG Examples