@codeswithpankaj

CSS Fonts

CSS Fonts Tutorial - codeswithpankaj.com

CSS provides various properties to control the appearance of fonts. This tutorial will cover font family, font size, font style, font weight, font variant, and the font shorthand property.

1. Font Family

The font-family property specifies the font for an element. It can include multiple font names as a "fallback" system.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Font Family - codeswithpankaj.com</title>
    <style>
        .font-family-example {
            font-family: "Arial", sans-serif;
        }
    </style>
</head>
<body>
    <p class="font-family-example">This text uses Arial font - codeswithpankaj</p>
</body>
</html>

In this example, the paragraph text uses the Arial font. If Arial is unavailable, it will use a generic sans-serif font.

2. Font Size

The font-size property sets the size of the font. It can be set using absolute values (px, pt), relative values (em, rem), percentages, or keywords (small, medium, large).

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Font Size - codeswithpankaj.com</title>
    <style>
        .font-size-example {
            font-size: 20px;
        }
    </style>
</head>
<body>
    <p class="font-size-example">This text is 20px in size - codeswithpankaj</p>
</body>
</html>

Here, the paragraph text is set to a size of 20px.

3. Font Style

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

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Font Style - codeswithpankaj.com</title>
    <style>
        .font-style-example {
            font-style: italic;
        }
    </style>
</head>
<body>
    <p class="font-style-example">This text is italic - codeswithpankaj</p>
</body>
</html>

In this example, the paragraph text is displayed in italic.

4. Font Weight

The font-weight property sets the weight (or boldness) of the font. Possible values are normal, bold, bolder, lighter, or numerical values (100 to 900).

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Font Weight - codeswithpankaj.com</title>
    <style>
        .font-weight-example {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p class="font-weight-example">This text is bold - codeswithpankaj</p>
</body>
</html>

Here, the paragraph text is displayed in bold.

5. Font Variant

The font-variant property allows you to control the usage of small-caps (small capital letters).

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Font Variant - codeswithpankaj.com</title>
    <style>
        .font-variant-example {
            font-variant: small-caps;
        }
    </style>
</head>
<body>
    <p class="font-variant-example">This text uses small-caps - codeswithpankaj</p>
</body>
</html>

In this example, the paragraph text is displayed in small capital letters.

6. Font Shorthand Property

The font shorthand property is used to set all the font properties in a single declaration. The order of values should be font-style, font-variant, font-weight, font-size/line-height, and font-family.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Font Shorthand - codeswithpankaj.com</title>
    <style>
        .font-shorthand-example {
            font: italic small-caps bold 16px/1.5 "Times New Roman", serif;
        }
    </style>
</head>
<body>
    <p class="font-shorthand-example">This text uses the font shorthand property - codeswithpankaj</p>
</body>
</html>

Here, the paragraph text is styled using the shorthand font property, making it italic, small-caps, bold, 16px in size, with a line height of 1.5, and using the "Times New Roman" font.

This tutorial covers the essential CSS font properties. For more tutorials and examples, visit codeswithpankaj.com.

PreviousCSS TextNextCSS Icons

Last updated