CSS Fonts

Fonts play a crucial role in making your page visually appealing. Fonts decide how texts will look on the screen; depending on the website, different kinds of fonts are used. Let’s look at the major font attributes.

Font Color

Font color defines the colour of the text or typography.

Syntex

<style>
    selector {
        color: red;
    }
</style>

For an in-depth explanation of colours, follow the Color Tutorial.

The font size property sets the size of the fonts. It has some predefined sizes, such as small, medium, large, larger, etc. The most commonly used units for font size are px (pixels), em (ems), rem (root ems), and percentage (%).
Quick notes:
px:px is the absolute unit. This is useful for setting precise sizes.
em:em is the relative unit, based on the font size of the parent element. If the element's font size is 1.5 em, that means the element will be 1.5 times the size of the parent.
rem:rem is the relative unit, based on the font size of the root element, i.e., .

Example:

<html lang="en">
<head>
        <style>
            #p1{
                font-size:small;
            }
            #p2{
                font-size:medium;
            }
            #p3{
                font-size:large;
            }
            #p4{
                font-size:25px;
            }
            #p5{
                font-size:7rem;
            }
            #p6{
                font-size:90%;
            }
            #p7{
                font-size:3em;
            }
        </style>
</head>
    <body>
    <p id="p1">font-size: small </p>
    <p id="p2">font-size: medium </p>
    <p id="p3">font-size: large </p>
    <p id="p4">font-size: 25px </p>
    <p id="p5">font-size: 7rem </p>
    <p id="p6">font-size: 90% </p>
    <p id="p7">font-size: 3em </p>
</body>
</html>

Output

CSS Font Style

The font style property sets the style of the font. There are three types of font styles: italic, normal, and oblique. Quick notes:
italic: Italic texts are slightly to the right.
normal: Default text style.
Oblique: Oblique is similar to italic but has less bend.

Example:

<html lang="en">
<head>
        <style>
            #p1{
                font-style: italic;
            }
            #p2{
                font-style: normal;
            }
            #p3{
                font-style: oblique;
            }
        </style>
</head>
    <body>
    <p id="p1">font-size: small </p>
    <p id="p2">font-size: medium </p>
    <p id="p3">font-size: large </p>
</body>
</html>

Output

CSS Font Variant

The CSS font variant property helps to toggle with the variations of the text. There are two common values for the font-variant property. 1. normal: The default value. 2. small-caps: This value renders the text in small capital letters.

Example:

<html lang="en">
<head>
        <style>
            #p1{
                font-variant: normal;
            }
            #p2{
                font-variant: small-caps;
            }
        </style>
</head>
    <body>
    <p id="p1">font-variant: normal </p>
    <p id="p2">font-size: small-caps </p>
</body>
</html>

Output

CSS Font Weight

The font-weight property controls the thickness or boldness of the text The values range from 100 (thin) to 900 (ultra-bold) and also have some predefined values such as lighter, bold, and bolder.

Example:

<html lang="en">
<head>
        <style>
            #p1{
                font-weight: 100;
            }
            #p2{
                font-weight: 200;
            }
            #p3{
                font-weight: 300;
            }
            #p4{
                font-weight: 400;
            }
            #p5{
                font-weight: 500;
            }
            #p6{
                font-weight: 600;
            }
            #p7{
                font-weight: 700;
            }
            #p8{
                font-weight: 900;
            }
            #p9{
                font-weight: lighter;
            }
            #p10{
                font-weight: bolder;
            }
        </style>
</head>
    <body>
    <p id="p1">font-weight: 100 </p>
    <p id="p2">font-weight: 200 </p>
    <p id="p2">font-weight: 300 </p>
    <p id="p2">font-weight: 400 </p>
    <p id="p2">font-weight: 500 </p>
    <p id="p2">font-weight: 600 </p>
    <p id="p2">font-weight: 700 </p>
    <p id="p2">font-weight: 800 </p>
    <p id="p2">font-weight: 900 </p>
    <p id="p2">font-weight: lighter </p>
    <p id="p2">font-weight: bolder </p>
</body>
</html>

Output

Font family

The font family property specifies the font stack. This is used to set the preferred font for the text content. We can define multiple font family names separated by commas based on priority.

Syntex

<style>
    selector{
        font-family: font1, font2, font3;
    }
</style>

Example

<html lang="en">
<head>
    <style>
        h1{
            font-family: 'Courier New', Courier, monospace;
        }
        h2{
            font-family: 'Times New Roman', Times, serif;
        }
    </style>
</head>
<body>
    <h2>CodeWithRahul</h2>
    <h3>Hello World</h3>
</body>
</html>

Output

Generic Font family

There are five generic font family names that serve as fallback options when specific fonts are not available:

1. serif: generic serif fonts (like Times New Roman).
2. sans-serif: generic sans-serif fonts (like Arial or Helvetica).
3. monospace: generic monospaced fonts (like Courier New).
4. cursive: generic cursive fonts (for handwritten styles).
5. fantasy: generic fantasy fonts (for decorative styles).

Tip: It is recommended to end the font family with any of these generic font family names.

Custom Font family

We can also use custom fonts for our websites; here, we will be using Google Fonts. Follow the steps:

1. Go to https://fonts.google.com/
2. Select your preferred font.
3. Choose the fonts based on font weight.
4. Copy the import link and paste it on the top of the stylesheet.
5. Copy the font family and paste it wherever you want to use it.
Or Follow the video:

</>CodeWithRahul

CSS Fonts

Font Color

Font Size

CSS Font Style

CSS Font Variant

CSS Font Weight

Font family

Generic Font family

Custom Font family

CodeWithRahul