Categories
CSS Tutorials

CSS Fonts

introduction
Formatting Text
Box Model
Advanced selectors
More about CSS

When we are creating a web page, it should be readable. So, selecting font and styles of the font is very important in creating a web page. CSS provides several properties for styling the font of the text, including changing their face, controlling their size and boldness, managing variant, and so on.

The font properties are:

1. font-family:The font-family property is used to specify the font to be used to render the text. This property can hold several comma-separated font names as a fallback system, so that if the first font is not available on the user’s system, browser tries to use the second one, and so on. Hence, list the font that you want first, then any fonts that might fill in for the first if it is not available. You should end the list with a generic font family which are five — serif, sans-serif, monospace, cursive and fantasy.

Syntax: 

font-family: "font family name";

2. font-style: The font-style property is used to set the font face style for the text content of an element. The font style can be normal, italic or oblique. The default value is normal.

Syntax:

p{
  font-style:style name;
}

Example:

p.normal { font-style: normal; }
p.italic { font-style: italic; }
p.oblique { font-style: oblique; }

3. font-size: The font-size property is used to set the size of font for the text content of an element.  There are several ways to specify the font size values e.g. with keywords, percentage, pixels, ems, etc.

Syntax:

font-size: font size value;

Example:

p { font-size: 14px; }
p { font-size: 0.875em; } /* 14px/16px=0.875em */
p { font-size: 1.4em; } /* 1.4em = 14px */
p { font-size: 1.4rem;} /* 1.4rem = 14px */
p { font-size: 62.5%;} /* font-size 1em = 10px */ 
p { font-size: larger; }
p { font-size: 1vw; }
p { font-size: calc(1em + 1vw); }

4. font-weight: The font-weight property specifies the weight or boldness of the font. This property can take one of the following values: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 and inherit. The numeric values 100-900 specify the font weights, where each number represents a weight greater than its predecessor. 400 is same as normal & 700 is same as bold. The bolder and lighter values are relative to the inherited font weight, while the other values such as normal and bold are absolute font weights.

Syntax:

font-weight: font weight value;

Example:

p { font-weight: bold; }

5. font-variant: The font-variant property allows the text to be displayed in a special small-caps variation. Small-caps or small capital letters are slightly different to normal capital letters, in which lowercase letters appear as smaller versions of the corresponding uppercase letters.

Syntax:

font-variant: font variant value;

Example:

p { font-variant: small-caps; }

In the below example we have discussed some font properties.

Example:

<html> 
  <head>
      <title>font-size property</title>
      <style>
          .ept {
              font-size: 40px;
              font-weight: bold;
              font-family: "Times New Roman";
              color: #090;
              text-align: center;
          }
   
          .para {
              font-size: 1.2em;
              text-align: center;
          }
      </style>
  </head>   
  <body>
      <div class="ept">Edupoly Tutorials</div>
      <div class="para">
        Tutorials for everyone
      </div>
  </body>
</html>

Output: