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:
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.
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.
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.
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.
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.
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.
Example
h1 { font: italic bold 12px/30px Georgia, serif; }
p { font: 12px/30px Georgia, serif; }
▶ Try it