Ways to Use CSS Font Properties with 5 Examples

The font property of CSS

To make the text look stylish, prominent and presenting differently for the different sections of your web pages, CSS comes up with the text specific properties. You can apply those properties to different headings (h1, h2…h6), paragraphs and other sections of the website.

A simple example of using font property

A few properties are explained in the CSS text properties tutorial. This chapter covers the font properties. CSS font properties include the font-family, font-size, font-style, font-weight etc.

>>A font-size example

This tutorial gives a brief about the font properties along with examples. We will show you how to use the font property by the single declaration to specify text properties. Also, this tutorial will give a brief about font properties to be used separately.

Font properties in single declaration

All the font properties like font-size, font-weight, font-family etc. can be specified in a single line by using the font property.

The order of specifying the values is as given below.

How to use the CSS font property?

Following is the syntax of using the font CSS property along with its order:

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

If any value is not given, the default value will be used. For example, if no font-weight value is given, it will use the normal as the value for the text.

Using font as single declaration example

The example below uses single font declaration for heading1, heading2, and paragraph for different CSS font properties. See the code and output by clicking the link or image below:

CSS font properties

Experience this example online

All these font properties are explained below with examples.

Font size property

The font size property sets the font size of the text in elements. This may be required to set the heading size of top heading or h1 to be larger than those come underway on your web page. Though, this is controlled by default for h1, h2 etc. However, with font size property you can control the size of the text.

Similarly, the font size in paragraphs <p> may be required smaller in certain paragraphs than others.

Syntax of font size property

Following is the syntax of font-size property.

font-size: 15px;

font-size: 15pt;

font-size: medium;

Example of using font size property

This example sets the font size of heading1, heading2, and paragraph.

CSS font size property

Experience this example online

The font-family property

To set the font family to be used in web page elements, CSS provides the font-family property. Multiple font family names can be provided, so if the first font is not supported by a browser the other one will be used and so on.

Multiple names must be separated by a comma. As such, few font names are the combination of more than one word, like “Times New Roman”, so it should be enclosed in double quotes.

Syntax of font-family property

Following is the syntax of the font-family property:

font-family: Verdana, Arial, “Times New Roman”

Example of using font-family property

In this example, the heading1, headgin2, and paragraph are using the different font family values by using font-family property.

Experience this example online

The font-weight property

In order to make the text bold or normal, CSS provides the font-weight property. A value between thin and thick or between the normal to bold can also be given.

An example of using font-weight property

This example sets the font-weight of heading1 as bold, heading 2 to use the value of 600 and makes it normal for the paragraph in the font-weight property.

CSS font weight property

Experience this example online

Font-style property

To make text look italic or oblique, the font-style property is used. The default value of this property is normal.

Syntax of font style

font-style: italic;

Example of using font style property

The example below uses the Italic style for heading 2 and oblique value for the paragraph text.

Experience this example online

Detail of font properties

Follow the links below to see the detailed chapter of font properties:

font-size property

font-weight property

font-family property

font style property

font color property