CSS Fonts

CSS Fonts properties control the appearance of text on a web page. These properties allow you to define the font type, size, weight, style, and other aspects to enhance the text's look and feel.

Font Properties Overview

CSS provides various properties to customize fonts. These include specifying the font family, size, weight, style, and more. Proper use of these properties ensures that your text is both readable and visually appealing.

1. Font Family

The font-family property specifies the typeface to be used. You can list multiple fonts as fallbacks in case the preferred font is unavailable.

/* Font Family */
.example-font-family {
    font-family: 'Georgia', serif;
}

        

2. Font Size

The font-size property controls the size of the text. It can be specified in various units like pixels (px), ems (em), or percentages (%).

/* Font Size */
.example-font-size {
    font-size: 24px;
}

        

3. Font Weight

The font-weight property defines the thickness of the font. Common values include normal, bold, or numeric values ranging from 100 to 900.

/* Font Weight */
.example-font-weight {
    font-weight: 700; /* Bold */
}

        

4. Font Style

The font-style property specifies the style of the font. Common values include normal, italic, and oblique.

/* Font Style */
.example-font-style {
    font-style: italic;
}

        

5. Font Variant

The font-variant property controls the usage of alternative font features, such as small caps.

/* Font Variant */
.example-font-variant {
    font-variant: small-caps;
}

        

6. Font Stretch

The font-stretch property allows you to adjust the width of the font. Values include normal, condensed, or expanded.

/* Font Stretch */
.example-font-stretch {
    font-stretch: expanded;
}