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)

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:

• Generic family: This family includes Monospace, serif and sans-serif.
• Font family: This includes font family like Monospace, serif and arial, Monospace, serif and New Times Roman, etc.

sans-Serif

• Arial, sans-serif:
• Helvetica, sans-serif:
• Gill sans, sans-serif:
• Lucida, sans-serif:
• Helvetica Narrow, sans-serif
• sans-serif

Serif

• Times, serif:
• Times New Roman, serif:
• Polatino, serif:
• Bookman, serif:
• New Century Schoolbook, serif
• serif

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

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

h2 { font-family:"monospace"; }

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

Output:

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.

h1 { font-size:40px; }

h2 { font-size:1.8em; }

p { font-size:120%; }

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.

• normal - font is normal.
• oblique - font is little leaning.
• italic - font is italic.oblique and italic looks similar.

h2 { font-style:normal; }

h3 { font-style:oblique;}

p { font-style:italic; }

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.

h1 { font-weight:500; }

p { font-weight: 600; }

div { font-weight: bold; }

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.

<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>

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.

h1 { line-height: 1.5; }

p { line-height: 2; }

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:

• It must include font-size and font-family properties.
• It must include line-height property if font-size is specified.
• font-family must be the last value.

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

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