The CSS font properties define the font family, boldness, size, and the style of a text.

In this tutorial, you can learn how to decorate fonts using CSS font attributes.

CSS Font Types

There are five font properties are used to design CSS fonts:

• font-family: The font family of a text is set with the font-family property.
• font-style: Define the style of the text.
• font-size: The font-size property sets the size of the text.
• font-weight: Specifies the weight of a font
• font-variant: Specifies whether or not a text should be displayed in a small-caps font.

Font Family

The font-family is used to define a family of text like 'Times New Roman', 'Arial', 'Helvetica', 'Times', etc; These are the font-families in CSS.

The CSS font-family can be categorized into two categories:

• Generic Font Family: A group of font families with a similar look (like "Serif" or "Monospace")
• Font Family: A specific font family (like "Times New Roman" or "Arial")

What is Serif and Sans-serif fonts?

Serif Fonts

Serif fonts have a small line at the end of the character, which means you can see sharpness at corners of characters.

A

Sans-Serif Fonts

If you remove the sharpness of Serif Fonts then it will be converted in Sans-Serif fonts.

A

Example: Font-Family

Output

Hello! Paragraph with Centaur font-family
Hello! Paragraph with Ebrima font-family

NOTE: It may possible some browsers not support some font-family. So, you can pass more than one font-family name property value separating them by comma(,).

Font Style

The CSS font-style property is used to define the style of font in CSS. There are three types of font-style value used in CSS.

• Normal: font-style
• Italic: font-style
• Oblique: font-style

Example: font-style

Output

Hello! Paragraph with normal font-style
Hello! Paragraph with oblique font-style
Hello! Paragraph with italic font-style

NOTE: The font-style also has two other inherit & initial properties values. The font style uses parent element font-style in inherit and the font-style it uses base font style in initial.

Font Size

The CSS font-size is used to define the size of the font, there are some predefined font-size units in CSS properties.

• Predefined font-size: xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger.
• Variable font-size: px, %, em, vw, etc.

Example: font-size

Output

Hello! Paragraph with font-size small
Hello! Paragraph with font-size x-large
Hello! Paragraph with font-size 30px
Hello! Paragraph with font-size 200%
Hello! Paragraph with 3em
Hello! Paragraph

What is em, vw, and % in font-size?

• em: Used to define font-size; 1em =16px.
• %: It is used to incerased OR decreased font-size; It will be relative to base font-size which is 100%, for example 20px in % | 20px=100%.
• vw: That means ViewPort is the browser window font-size. 1vw = 1% of the viewport width; If the viewport is 100cm wide, 1vw is 1cm.

Font Weight

The CSS Font-weight is used to define the thickness of fonts. There are some predefined values for font-weight in CSS listed below:

• Common font-weight: This category includes values like Normal, Bold, Bolder, Lighter.
• Numerical font-weight: The value of the numerical category is a number that is multiple of 100. The min value is 100 and the max value is 900.

NOTE: 100 is thinner and 900 is thicker

Example: CSS font-weight

Output

Hello! This is a Paragraph with font-weight normal
Hello! This is a Paragraph with font-weight bold
Hello! This is a Paragraph with font-weight 400
Hello! This is a Paragraph with font-weight 900

Font Variant

The CSS font-variant property is used to convert small letters to capital letters.

There are two possible value available of font-variant 'Normal' and 'Small-Caps':

Example: Font all in One

Output

Hello! This is a Paragraph with font-variant small-caps

All Fonts Properties

Font: All in One

The CSS font is used to specify all CSS font properties in on line.

Example: Font all in One

Output

Hello! This is a Paragraph with all the properties of font.

NOTE: Define more than one value for font property by seperating values by a single space.