Changing Text Fonts using CSS

In the last module, we discussed text formatting. By now, you already know how to work with backgrounds and text formatting in CSS. Let's begin with Fonts.

Fonts set a theme for your webpage. Fonts also help you connect with your audience. Using Comic-Sans on a formal webpage makes no sense and could immediately result in a negative impression, while on a website for kids, the same font can seem playful.

You can specify all the font properties in a single rule by using the font property.

Syntax:

font: font-style font-variant font-weight font-size font-family;

You are not required to include all the properties, consider an example:

p { 
    font: normal small-caps bold 18pt/22pt "Times New Roman", Courier;
}

This is compatible with CSS1, CSS2 and CSS3 along with following Web Browsers,

• IE 4+
• Firefox 1+
• Opera 6+
• Safari 1+
• Chrome 1+

Font Family - font-family

This property defines the font face to be used for the text.

Syntax:

font-family: font 1[, font2, ... ,fontN]

Fonts may be named specifically or a generic font family name can be used. When multiple font names are specified using commas, they are read in a descending order looking for a first match. Not all fonts are supported in all the browsers and devices, hence we should provide comma separated fonts, so that, most device/browsers are covered. The five generic font names are:

• Serif
• Sans-serif
• Cursive
• Fantasy
• Monospace

Note: They may not render the same way in all the browsers.

Example:

p{ 
    font-family: Serif; 
}

Live Example →

This is compatible with CSS1, CSS2 and CSS3 along with following Web Browsers,

• IE 3+
• Firefox 1+
• Opera 4+
• Safari 1+
• Chrome 1+

This property is equivalent to the face attribute of a <font> tag. As the <font> tag is deprecated in HTML5, it is adviced not to use it.

Font Size - font-size

This is used to set the size of the font.

Syntax:

font-size: length | percentage | Size in Words | inherit;

The default is medium. Lengths are often specified in points, pixels, em etc.

Percentage values set the font-size to a percentage of current inherited font-size.

px pixel value is device dependent and is generally equivalent to 1/96th of an inch. But that value differs for devices with different screen resolution.

Another widely used unit is em. Let's try to understand this, with the help of an example: If we set the font-size of the text in the body as 1em and set the font-size of the h1 heading text as 3em. Then no matter which device, the browser will make sure that the heading text is always 3 times the size of the body text.

Example:

#fontastic{ 
    font-size: 12px;
}
#fontastic-1{
    font-size: 1em
}

Live Example →

This is compatible with CSS1, CSS2 and CSS3 along with following Web Browsers,

• IE 3+
• Firefox 1+
• Opera 4+
• Safari 1+
• Chrome 1+

Font Style & Font Weight

font-style sets the presentational style of the font while the font-weight sets the weight, or relative boldness of the text.

Syntax:

font-style: italic | normal | oblique | inherit;
font-weight: normal | bold | bolder | lighter | 100 to 900 | inherit;

Live Example →

Most browsers would interpret 100-500 as normal text, 600-900 as bold. Relative values such as lighter or bolder will increase or decrease according to the parent element's font weight.

This is compatible with CSS1, CSS2 and CSS3 along with following Web Browsers,

• IE 3+
• Firefox 1+
• Opera 4+
• Safari 1+
• Chrome 1+

Font Variant

This property sets a variation of the specified or default font-family.

Syntax:

font-variant: normal | small-caps | inherit;

Live Example →

The small-caps value sets the text in small to capital. An application of the small-caps style is legal or license documents.

This is compatible with CSS1, CSS2 and CSS3 along with following Web Browsers,

• IE 3+
• Firefox 1+
• Opera 4+
• Safari 1+
• Chrome 1+