You are currently viewing Fonts in CSS | Web Development

Fonts in CSS | Web Development

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:

Heading

This is 1st paragraph

This is 2nd paragraph

This is 3rd paragraph

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

Example:

p {
   font-style:italic;
   }

Output:

Heading

This is paragraph

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

Example:

#para2 {
       font-weight:bold;
       }

#para3 {
       font-weight:500;
       }

Output:

Heading

This is 1st paragraph

This is 2nd paragraph with bold font

This is 3rd paragraph with 500 font weight

  • Font-size: This property is used to set the size of 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:

Heading

This is 1st paragraph with font size 30px

This is 2nd paragraph with font size small

This is 3rd paragraph with font size large

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

Example:

p {
   font-variant: small-caps;
   }

Output:

Heading

This is paragraph

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

Example:

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

Output:

Heading

This is paragraph

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

This Post Has One Comment

  1. Koushik Das

    Thanks for this informative article

Leave a Reply