How to Use CSS Fonts


CSS font properties are used to control the appearance of text. The font properties allow you to specify many aspects of the text, such as the font family, font size, font weight, font style, and more.

To make webpage more readable and easy to overview we have different size, forms, shapes and different other visible properties of texts which are controlled by CSS font properties.

The different CSS font properties are:

  1. font-family
  2. font-size
  3. font-style
  4. font-weight
  5. font-variant
  6. line-height
  7. font (shorthand)
CSS font example
Change font properties and see the effect. This is an example text. This is an example text. This is an example text. This is an example text.

Let's see each of them in detail.


1. CSS font family

The font-family property is used to specify the font family for an element. The font family is a list of one or more font family names and/or generic family names. The browser will select the first font that is installed on the computer.

Generic font families are used as a fallback when the browser is unable to display the font specified in the font-family property.

Font families are divided into two parts:

sans-Serif

Serif

Using CSS property font-family we specify the family to the HTML elements.

Example

h1 { font-family:"sans-serif"; }

h2 { font-family:"monospace"; }

p { font-family:"Times New Roman"; }
Try it

Output:

This is shown in sans-serif.

This is shown in monospace.

This is shown in Times New Roman.



2. CSS font size

CSS font-size property is used to set the size of the font. The font size may be specified in absolute or relative terms.

Using this property we can resize the font by choosing any scale like px, em, rem, pt, %, etc.

Example

h1 { font-size:40px; }

h2 { font-size:1.8em; }

p { font-size:120%; }
Try it

3. CSS font style

CSS font-style property is used to set the font style of an HTML document.

Using this property we can choose font style like normal, italic, oblique etc.

Example

h2 { font-style:normal; }

h3 { font-style:oblique;}

p { font-style:italic; }
Try it

4. CSS font weight

CSS font-weight property is used to define the weight of the font and manages the boldness of the font.

The value of this property can be set in numbers like 100, 200, 300, 400, 500, 600, 700, 800, and 900 or in keywords like normal, bold, bolder, and lighter.

Example

h1 { font-weight:500; }

p { font-weight: 600; }

div { font-weight: bold; }
Try it

5. CSS font variant

CSS font-variant property is used to define whether or not a text should be displayed in a small-caps font.

font-variant: small-caps make small text capital but those tests which convert to capital are smaller in size than those of original capital text present in the paragraph.

Example

<h2 style="font-variant:normal">This heading has normal font-variant property.</h2>
<p style="font-variant:small-caps">This Paragraph Has Small-caps Font-variant Property.</p>
Try it

6. CSS line height

CSS line-height property is used to set the space between lines of text.

Using this property we can set the space between lines of text in pixels, percentage, length, or normal.

Example

h1 { line-height: 1.5; }

p { line-height: 2; }
Try it

7. CSS font shorthand property

CSS font shorthand property is used to set all the font properties in one declaration.

Using this property we can set the font style, font variant, font weight, font size/line height, and font family in one declaration.

Syntax:

font: font-style font-variant font-weight font-size/line-height font-family;

There are some rules to use this property:

Example

h1 { font: italic bold 12px/30px Georgia, serif; }

p { font: 12px/30px Georgia, serif; }
Try it