Conquer CSS Episode[6]:- CSS Fonts

You are currently viewing Conquer CSS Episode[6]:- CSS Fonts

In this post of Conquer CSS Series, we are going to learn about different Fonts in CSS. They act as a backbone of the whole CSS.

CSS – Fonts

You can set the following font properties of an element 

  • The font-family property is used to change the face of a font.
  • The font-style property is used to make a font italic or oblique.
  • The font-weight property is used to increase or decrease how bold or light a font appears.
  • The font-size property is used to increase or decrease the size of a font.
  • The font property is used as shorthand to specify the number of other font properties.

Font Family

Following is the example, which demonstrates how to set the font family of an element. A possible value could be any font family name.

 In CSS, we have two types of fonts web-safe fonts and web fonts. Web saved fonts are the fonts that come pre-installed with most of the operating systems, therefore, using these fonts you will never encounter any error. But on the other hand, some fonts are not shipped with the OS; so to use them, we need to import them from the web.

We can also use the technique of font stack. A font stack is a list of fonts that are listed in order of preference you would like them to appear in case some fonts are not loading. The example of this is shown below-

p {font-family:'Ubuntu', 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;}

This list will be iterated until the specified font is not available in the system.

To see the whole list of web saved fonts, there is a very good website called CSS Font Stack. It provides the complete list of web saved fonts. Talking about web fonts, we can easily import them from Google. To import the code, there is no website better than Google Fonts. To use it, simply copy the style sheet add it to your code, and update the font stack with the specific font you desire.

Font Style

Font-style property mainly has values like normal, italic, and oblique. Following is the example, which demonstrates how to set the font style of an element. 

p{
 font-style:italic;
}  	

Font Weight

The font-weight property sets how thick or thin characters in the text should be displayed. Possible values could be normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900. The following example demonstrates how to set the font-weight of an element.

p{
 font-weight:bold;
} 

p{
 font-weight:bolder;
} 

p{
 font-weight:600;
} 

Font Size

The font-size property is used to control the size of fonts. Possible values could be xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, size in pixels, or in %. The following example demonstrates how to set the font size of an element. 

p{
 font-size: 20px;
} 
p{
 font-size:small;
} 

Shorthand Property

You can use the font property to set all the font properties at once.

p{

font : italic small-caps bold 15px georgia;

}

There are various other font properties. Most of the important ones are covered in this tutorial. You can now test different other font properties as well. You can take the help of references available anytime but for it, you should know the basics.

Leave a Reply