Menu
CSS

font-style

The font-style property in CSS is used to specify the style of the font, primarily focusing on italics. It can take one of several values:

 

Values of font-style

  • normal: The text is shown in a standard, upright font style.
  • italic: The text is shown in an italicized font style.
  • oblique: The text is shown in an oblique font style (similar to italic but can be different in some typefaces).

Here are examples of how to use the font-style property:

 

Using font-style

/* Apply normal font style */
p {
    font-style: normal;
}

/* Apply italic font style */
em {
    font-style: italic;
}

/* Apply oblique font style */
blockquote {
    font-style: oblique;
}

 

Applying font-style to Different Elements

/* Italicize all text inside paragraphs */
p {
    font-style: italic;
}

/* Make text inside emphasis tags normal */
em {
    font-style: normal;
}

/* Make text inside blockquote tags oblique */
blockquote {
    font-style: oblique;
}

 

Using font-style with Font Face

When defining custom fonts using @font-face, you can also specify the font-style to ensure the correct style is applied:

@font-face {
    font-family: 'MyCustomFont';
    src: url('mycustomfont-regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'MyCustomFont';
    src: url('mycustomfont-italic.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
}

body {
    font-family: 'MyCustomFont', Arial, sans-serif;
}

In this example, two different font files are used for the normal and italic styles of the custom font.

 

Practical Example

Here’s a complete example applying different font styles to various HTML elements:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Font Style Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .normal-text {
            font-style: normal;
        }
        .italic-text {
            font-style: italic;
        }
        .oblique-text {
            font-style: oblique;
        }
    </style>
</head>
<body>
    <p class="normal-text">This is normal text.</p>
    <p class="italic-text">This is italic text.</p>
    <p class="oblique-text">This is oblique text.</p>
</body>
</html>

In this example:

  • .normal-text class applies a normal font style.
  • .italic-text class applies an italic font style.
  • .oblique-text class applies an oblique font style.

The font-style property helps in creating typographic emphasis and differentiation in your web design, enhancing the readability and visual appeal of your content.

CSS