CSS - Fonts

Quiz

CSS fonts allows to customize font style of webpages using various font related properties. In this tutorial we will understand the font styling in CSS.

What is CSS Font?

In CSS, the font property is used to style and adjust type of text used in webpage.

You can define fonts and customize their appearance by setting properties like font-family, font-size, font-weight and font-style. You can also use the shorthand property font to manipulate all the font style.

Types of CSS Fonts

Monospace Fonts: The font in which every letter have equal width.
Serif Fonts: Have small stroke at the edge of each letter.
San-Serif Fonts: Clean fonts with out any strokes.
Fantasy Fonts: Decorative fancy fonts.
Cursive Fonts: The font that resembles human handwriting.

Popular CSS Fonts

Here is a table with some popular font and their generic font-family.

Generic Font Family	Examples of Font Names
Serif	Times New Roman Georgia Garamond
Sans-serif	Arial Verdana Helvetica
Monospace	Courier New Lucida Console Monaco
Cursive	Brush Script MT Lucida Handwriting
Fantasy	Copperplate Papyrus

Setting Text Fonts

The font-family property is used to specify font name for a text content.

Example

In this example, we have used the font-family property to set the font of the paragraph element.

<html>
<head>
    <style>
        p {
            font-family: Lucida Handwriting, Cursive;
        }
    </style> 
</head>

<body>
    <p >
        This is a font that written in Lucida 
        Handwriting. THis is a font that looks 
        like human handwriting.
    </p>
</body>
</html>

Setting Text Font Size

To set the font size of the text, we use font-size property. You can use its values such as small, medium, and, large to get a variety of font sizes of the text.

Example

In this example, we have used the font-size property with its different values to set the size of the text.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Font Size Example</title>
    <style>
        .small {
            font-size: small;
        }

        .medium {
            font-size: medium;
        }

        .larger {
            font-size: larger;
        }

        .px {
            font-size: 18px;
        }

        .percent {
            font-size: 120%;
        }
    </style>
</head>
<body>
    <h2>CSS Font-Size Examples</h2>
    <p class="small">This text has a 'small' font size.</p>
    <p class="medium">This text has a 'medium' font size.</p>
    <p class="larger">This text has a 'larger' font size.</p>
    <p class="px">This text has a font size of 18px.</p>
    <p class="percent">This text has a font size of 25%.</p>
</body>
</html>

Setting Font Weight

You can use the font-weight property to set the boldness of the text.

Example

In this example, we have used the font-weight property to set the boldness of the text. The valid numeric value is from 100-900 for number class.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS font-weight Property Example</title>
    <style>
        .normal {
            font-weight: normal;
        }

        .bold {
            font-weight: bold;
        }

        .lighter {
            font-weight: lighter;
        }

        .number {
            font-weight: 600;
        }
    </style>
</head>
<body>
    <h2>CSS font-weight Property</h2>
    <p class="normal">This text has a 'normal' font-weight.</p>
    <p class="bold">This text has a 'bold' font-weight.</p>
    <p class="lighter">This text has a 'lighter' font-weight.</p>
    <p class="number">This text has a font-weight of 600.</p>
</body>
</html>

Setting Font Style

To set the style of the written text, we use the font-style property. The text can be set to normal, italic or oblique.

Example

In this example, we have used font-style property to set the style of the written text.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>CSS font-style Property Example</title>
    <style>
        .normal {
            font-style: normal;
        }

        .italic {
            font-style: italic;
        }

        .oblique {
            font-style: oblique;
        }
    </style>
</head>

<body>
    <h2>CSS font-style Property</h2>
    <p class="normal">It has 'normal' font-style.</p>
    <p class="italic">It has 'italic' font-style.</p>
    <p class="oblique">It has 'oblique' font-style.</p>
</body>

</html>

CSS Font Shorthand Property

You can use the font shorthand property to modify size, weight, and style of texts.

Example

In this example, we have used the font shorthand property to set font style, weight, size and family.

<html>
<head>
    <style>
    .font-example {
        /* in-order: font style, weight, size, family */
        font: italic bold 20px Arial, sans-serif; 
    }
    </style>
</head>

<body>
    <p class="font-example">
        This is an example of text with an adjusted 
        font style, weight, and size using the font 
        shorthand property.
    </p>
</body>
</html>

CSS Font Related Properties

The following table lists all the CSS properties related to font:

Property	Description	Example
font-family	Specifies the font for an element.	Try It
font-size	Specifies the size of the font.	Try It
font-weight	Specifies the boldness of the font.	Try It
font-style	Specifies the style of the font (normal, italic, oblique).	Try It
font-variant	Specifies whether or not a text should be displayed in a small-caps font.	Try It
line-height	Specifies the line height.	Try It

Print Page