CSS font Property

February 10, 2021 12:37 pm IST

❮ Prev Next ❯

You are Here:

Demo

This demo uses shorthand property 'font'.

This is a sentence.

CSS font Property

CSS font is a shorthand property of the following CSS properties

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> p{ font: italic small-caps 23px cursive; } </style> </head> <body> <h1>CSS font Property</h1> <p>This is a paragraph.</p> </body> </html>

Run

Syntax

Using CSS

element{ font: italic small-caps 23px cursive; }

Using Javascript

object.style.font="italic small-caps 23px cursive";

Animatable

Yes, font property is animatable. CSS Animatable Properties Reference.

Default Value

Default value for CSS font property depends on user agent (browser).

Property Value

The following table provides a list of values for CSS font property.

Value	Type	Explanation
font-style	Optional	Specifies the font style.
font-variant	Optional	Specifies the font variant.
font-weight	Optional	Specifies the font weight.
font-stretch	Optional	Specifies whether or not to make text wider or narrower.
font-size	Required	Specifies the font size.
font-family	Optional	Specifies the name of a font family.
font-family	Required	Specifies the font family.

Using JavaScript

In the following example, we will demonstrate how to change the CSS font property of an element using JavaScript.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <body> <h1>CSS font Property</h1> <p>This is a paragraph</p> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementsByTagName("p")[0]; function myFunction(){ x.style.font = "italic small-caps 23px cursive"; } </script> </body> </html>

Run