CSS Font

In CSS, we can control the font of text within HTML elements using various font-related properties.
These properties allow you to set the font family, size, style, weight, and other characteristics.

font-related CSS properties

font-family: This indicates the font family for the text within an element. You can provide a list of font family names in order of preference, and the browser will use the first available font in the list.

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

font-size: Sets the size of the font. You can specify the size in various units like pixels, ems, percentages, or keywords like "small," "medium," "large," etc.

h1 {
font-size: 24px;
}

font-weight: Controls the thickness or boldness of the text. You can use values like "normal," "bold," or numeric values like 400, and 700.

strong {
font-weight: bold;
}

font-style: Indicates the font style, such as "normal," "italic," or "oblique."

em {
font-style: italic;
}

font-variant: This property controls aspects like small caps or normal text. Common values are "normal" and "small-caps."

.small-caps {
 font-variant: small-caps;
}

line-height: Sets the height of each line of text. It can be specified as a unit (e.g., pixels) or as a unitless value for a multiple of the font size.

p {
line-height: 1.5; /* 1.5 times the font size */

Example:

<!DOCTYPE html>  
<html>  
  <head>  
   <style>  
 body {  
          font-size: 100%;  
          }  
           h1 { color: red; }  
           h2 { color: #9000A1; }   
            p { color:rgb(0, 220, 98); }   
      }  
    </style>  
  </head>  
      <body>  
        <h1>This is heading 1</h1>  
        <h2>This is heading 2</h2>  
        <p>This is a paragraph.</p>  
     </body>  
</html>

Output:

This is heading 1

This is heading 2

This is a paragraph.

CSS Font Family:

In CSS, the font-family property is used to specify the font family for text within an HTML element.

It allows you to define a list of font family names in order of preference. The browser will attempt to render text using the first available font in the list, and if it's not available, it will move to the next font in the list.

The font-family property is a crucial part of controlling the appearance of text on your web page.

font-family property in CSS

.selector {
 font-family: FontName, fallbackFont, sans-serif;
}

FontName: This is the primary font family you want to use. You can specify a specific font name or a generic font family like "serif," "sans-serif," "monospace," or "cursive."

fallback Font: If the primary font is not available on the user's system, the browser will attempt to use the fallback font.

sans-serif: This is a generic font family that represents fonts without serifs. If neither the primary font nor the fallback font is available, the browser will use a default sans-serif font.

Example:

<!DOCTYPE html> 
<html> 

<head> 
        <style>
                body {
                        font-size: 100%;
                }

                h1 {
                        font-family: sans-serif;
                }

                h2 {
                        font-family: serif;
                }

                p {
                        font-family: monospace;
                }
                }
        </style> 
</head> 

<body> 
        <h1>This heading is shown in sans-serif.</h1> 
        <h2>This heading is shown in serif.</h2> 
        <p>This paragraph is written in monospace.</p> 
</body> 

</html>

Output:

This heading is shown in sans-serif.

This heading is shown in serif.

This paragraph is written in monospace.