Having the right font has a huge impact on how users experience a website. The right font can create a strong identity for your brand. Using a font that is easy to read are important. The font adds value to your text. It is also important to choose the correct color and text size for the font.

Font Family

There are five generic font families:

1. Serif fonts have a small stroke at the edges of each letter. They create a sense of formality and elegance.
2. Sans-serif fonts have clean lines (no small strokes attached). They create a modern and minimalistic look.
3. Monospace fonts – here all the letters have the same fixed width. They create a mechanical look. 
4. Cursive fonts imitate human handwriting.
5. Fantasy fonts are decorative/playful fonts.

We use the font-family property to specify the font of a text. The font-family property should hold several font names as a “fallback” font, to ensure maximum compatibility between browsers/operating systems. Start with the font you want, and end with a generic family (to let the browser pick a similar font in the generic family, if no other fonts are available). The font names should be separated with comma.

If the font name is more than one word, it must be in quotation marks, like: “Times New Roman”.

<div class="row">
    <div class="col-3">
        Font Family
    </div>
    <div class="col-9 fontFam">
        I am learning css.
    </div>
</div>

<style>
            .fontFam {
                font-family: "Lucida Console", "Courier New", monospace;
            }
</style>

Font Style

The font-style property is mostly used to specify italic text.

<div class="row">
    <div class="col-3">
        Font Style
    </div>
    <div class="col-9 fontStyleNormal">
        This is font style normal
    </div>
    <div class="col-3">
    </div>
    <div class="col-9 fontStyleItalic">
        This is font style italic
    </div>
</div>

 <style>
            .fontStyleNormal {
                font-style: normal;
            }

            .fontStyleItalic {
                font-style: italic;
            }
        </style>

Font Weight

The font-weight property specifies the weight of a font. Values can be normal, bold, lighter, bolder, <number> from 100-1000.

<div class="row">
    <div class="col-3">
        Font Weight
    </div>
    <div class="col-9 fontWeight">
        This is font weight
    </div>
</div>

<style>
            .fontWeight{
                font-weight: 900;
            }
        </style>

Font Size

The font-size property sets the size of the text. Being able to manage the text size is important in web design. However, you should not use font size adjustments to make paragraphs look like headings, or headings look like paragraphs. Always use the proper HTML tags, like <h1> – <h6> for headings and <p> for paragraphs.

The font-size value can be an absolute, or relative size.

Absolute size:

• Sets the text to a specified size
• Does not allow a user to change the text size in all browsers (bad for accessibility reasons)
• Absolute size is useful when the physical size of the output is known

Relative size:

• Sets the size relative to surrounding elements
• Allows a user to change the text size in browsers

Google Fonts

You can also use Google fonts if you want. They are free to use and many people use them.