CSS Fonts

Picking the right font for your website is very important. You must choose the font that is stylish and easy to read. The right font can make your webpage attractive that engages the user.

CSS provides a range of options for font customization. In this article we will deeply discuss some CSS Fonts that are mainly used in webpages.

Below is the list of CSS Font Properties that are used to make our content stylish.

CSS font-family Property:- The font-family property defines the font of an element.
CSS font-style Property:- The font-style property defines the style of the font. We can set it as inherit, italic etc.
CSS font-weight Property:- The font-weight property defines the font weights. We can set it as bold, bolder etc.
CSS font-size Property:- The font-size property defines the size of the font. We usually set the font size in px.

CSS Font Family Property

In CSS, the font-family property is used to define the font of a text.

NOTE:- If your font name is longer then one word, you must keep it in quotation marks, like “Times New Roman”.

Learn more about CSS Font Family Property.

CSS Font Style Property

In CSS, the font-style property defines the font style of a specified element. It’s value can be Italic, Oblique etc.

Syntax

font-style: style value;

Example

<!DOCTYPE html>
<html>
<head>
<style>
h4{
  font-style:italic;
}
</style>
</head>
<body>
<h2>CSS font style property</h2>
<h4>This is an italic text.</h4>
</body>
</html>

Copy the Code and Run it Here

CSS Font Weight Property

This CSS property can be used to boldness of the font. It can be bold, lighter, bolder etc.

Syntax

font-weight: #value;

Example

<!DOCTYPE html>
<html>
<head>
<style>
h4{
  font-weight:bolder;
}
</style>
</head>
<body>
<h2>CSS font weight property</h2>
<h4>This is a bolder text.</h4>
</body>
</html>

Copy the Code and Run it Here

CSS Font Size Property

The CSS font-size property is used to set the font size of an element. The font size can be set in px, %, em etc.

Syntax

font-size: #value;

Example

<!DOCTYPE html>
<html>
<head>
<style>
h4{
  font-size:40px;
}
</style>
</head>
<body>
<h2>CSS font weight property</h2>
<h4>This text has 40px font size.</h4>
</body>
</html>

Copy the Code and Run it Here

Previous

Next

CSS Fonts