CSS font Property

You are Here:


This demo uses shorthand property 'font'.

This is a sentence.

CSS font Property

CSS font is a shorthand property of the following CSS properties


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>


Using CSS

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

Using Javascript

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


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.

font-styleOptionalSpecifies the font style.
font-variantOptionalSpecifies the font variant.
font-weightOptionalSpecifies the font weight.
font-stretchOptionalSpecifies whether or not to make text wider or narrower.
font-sizeRequiredSpecifies the font size.
font-familyOptionalSpecifies the name of a font family.
font-familyRequiredSpecifies the font family.

Using JavaScript

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


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>


Hi Developers, we almost covered 98.7% of CSS Tutorials with examples for quick and easy learning.

We are working to cover every Single Concept in CSS.

Please do google search for:

Join Our Channel

Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.

This channel is primarily useful for Full Stack Web Developer.

Share this Page

Meet the Author