In this article, we will learn about fonts in CSS. So, you might have thought that what’s the importance of the font that we use in our web page? Selecting the right font can have a major impact on the readers. The font must be easy to read, the color and size of the font must be proper, and it should enhance the reader’s experience.

We have the following font properties for an HTML element:

• Font-family
• Font-style
• Font-weight
• Font-size
• Font-variant
• Font-shorthand

---

• Font-family: It is used to set the font of the text in HTML document. there are some web safe fonts that are already available in most of the browsers (like Serif,Sans-serif). and we can also import fonts from the web (like google fonts) and link them to the document and use them.

Example:

#para2 {
        font-family:Arial, Helvetica, sans-serif;
        }

/* Linking Ubuntu font from google fonts to this document (This is comment and it doesn't have any impact on the code)*/

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">

#para3 {
        font-family: 'Ubuntu', sans-serif;
        }

Output:

• Font-style: This property is used to make font normal,italic, and oblique.

Example:

p {
   font-style:italic;
   }

Output:

• Font-weight: This property tells how bold our text will look. the values of font weight can be normal, lighter, bold, bolder, 100, 200, 300, up to 900.

Example:

#para2 {
       font-weight:bold;
       }

#para3 {
       font-weight:500;
       }

Output:

• Font size: This property is used to set the size of the font. font sizes can be small, medium, large, size in pixels or %.

Example:

#para1 {
        font-size:30px;
        }

#para2 {
        font-size:small;
        }

#para3 {
        font-size:large;
        }

Output:

• Font-variant: This property sets the font variant of the element. normal and small-caps are possible values of this property.

Example:

p {
   font-variant: small-caps;
   }

Output:

• Font-shorthand: This property states that we can use all the above-mentioned properties at once using the font shorthand property.

Example:

p {
   font: italic small-caps bold 18px Georgia, serif;
   }

Output:

Hope this article will guide you to recognize all about the fonts in CSS that you needed and still if you have any problems or queries regarding this, post them in the comments section and we will be glad to assist you.