CSS plays a key role in font styling. The CSS font properties allow us to change the font-family, font-size, font-weight, font-kerning, and a lot more properties. The CSS font property is a shorthand for font-style, font-variant, font-weight, font-size/line-height and font-family. Further, we can apply styles to the text through text-decoration using CSS text-shadow, text-stroke, text-fill-color, color, etc.
color
This property is used to change the color of the text.
font-family
This property is used to set the font face for an element.
font-kerning
To make the character spacing uniform and increase readability, the font-kerning property is used. However, this property is font specific.
font-size
The font-size property sets the size of the font.
font-stretch
Some fonts have additional faces like condensed, bold, etc. The font-stretch property is used to specify these.
font-style
To italicize the text by an angle, the font-style property is used.
font-variant
font-variant allows us to specify whether an element should be displayed in small caps or not.
font-weight
The boldness of characters is specified by the font-weight property.
line-height
This property sets the spacing between two lines.
text-decoration
To underline or overline and style it, text-decoration is used.
text-shadow
Like box-shadow, this property adds a shadow to the characters as desired.
Furthermore, there are text layout properties like text-indent, text-overflow, white-space, word-break, direction, hyphens, text-orientation, word-wrap, etc.
Syntax
The syntax of font property is as follows −
Selector {
font-property: /*value*/
}Example
The following examples illustrate CSS fonts property −
<!DOCTYPE html>
<html>
<head>
<style>
p {
font: 1.6em arial;
text-shadow: -3px -12px lightblue;
}
p + p {
font: italic bold 12px/30px menu;
text-shadow: unset;
box-shadow: 0 0 5px 1px black;
}
div {
width: 30%;
font-size: 1.4em;
font-family: cursive;
background-color: tomato;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<p>This is demo text</p>
<p>This text is for demo and included here to display different font styles in CSS.</p>
<div>Another text with different font style.</div>
</body>
</html>Output
This gives the following output −
Example
<!DOCTYPE html>
<html>
<head>
<style>
p {
font: oblique 5deg small-caps bold 1.3em/0.5px cursive;
border: 3px solid lightcyan;
}
</style>
</head>
<body>
<p>This is demo text</p>
<p>This is another demo text</p>
</body>
</html>Output
This gives the following output −
