CSS Fonts

If you want to enlarge the quality or readability of text on a page then you will prefer the correct font. Choosing the correct font can create an effective look to your page text.

CSS font property

Here are the list of some important font property:

  • font-family
  • font-style
  • font-weight
  • font-size
  • font-variant

Generic Font Families

In CSS, there are five types of generic font families, which is given below:

  1. serif,
  2. monospace,
  3. cursive and
  4. sans-serif,
  5. fantasy.

CSS Font Family

The font-family property can contain lots of comma-separated font names as a fallback system. You will begin the font you want and a finale with a generic family. This is because if the first font is not obtainable on the user’s system, the browser tries to apply the 2nd one, and so on.

Note: If the font-family starts with lots of words, you must be in quotation marks, such as: “Lucida Console”.
Let’s see the given example to understand how font-family property works:

Example

<!DOCTYPE html>  
<html>  
<head>  
<style>  
.bor-test {
    font-family: "Times New Roman", Times, serif;
}
.bor-test1 {
    font-family: Arial, Helvetica, sans-serif;
}
</style>  
</head>  
<body>  
<p class="bor-test">Here we use in the Times New Roman font family.</p> 
<p class="bor-test1">This is a paragraph, we use in the Arial, Helvetica font.</p> 

</body>  
</html>

 

Output

Here We use in the Times New Roman font family.

This is a paragraph, we use in the Arial, Helvetica font.

 

CSS Font Size

We use font-size property to increase or decrease the size of your text. You can set the font-size with pixels,em or in %.
Let’s see the given example to understand how font-size property works:

Example

<!DOCTYPE html>  
<html>  
<head>  
<style>  
.bor-test {
    font-size: 30px;
}
.bor-test1 {
    font-size: 0.875em; /* 14px/16=0.875em */
}
</style>  
</head>  
<body>  
<p class="bor-test">The font size is 30px.</p>
<p class="bor-test1">The font size is 0.875em.</p> 

</body>  
</html>

 

Output

The font size is 30px.

The font size is 0.875em.

 

CSS Font Weight

If you want to show the boldness or weight in text, then you will define font-weight property.
You can use one of the following values for the font-weight: normal, bolder, bold, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 and inherit.
Let’s see the given example to understand how font-weight property works:

Example

<!DOCTYPE html>  
<html>  
<head>  
<style>  
.bor-test1 {
    font-weight:bold;
}
.bor-test2 {
    font-weight:bolder;
}
.bor-test3 {
    font-weight:lighter;
}
.bor-test4 {
    font-weight:100;
}.bor-test5 {
    font-weight:200;
}
.bor-test6 {
    font-weight:300;
}
.bor-test7 {
    font-weight:400;
}
.bor-test8 {
    font-weight:500;
}
.bor-test9 {
    font-weight:600;
}
.bor-test10 {
    font-weight:700;
}
.bor-test11 {
    font-weight:800;
}
.bor-test12 {
    font-weight:900;
}

</style>  
</head>  
<body>  
<p class="bor-test1">The font is bold font.</p>   

<p class="bor-test2">Here we use bolder font.</p>   

<p class="bor-test3">Here we use lighter font.</p>   

<p class="bor-test4">Here we use 100 weight font.</p>   

<p class="bor-test5">Here we use 200 weight font.</p>  

<p class="bor-test6">Here we use 300 weight font.</p>  
 
<p class="bor-test7">Here we use 400 weight font.</p>   

<p class="bor-test8">Here we use 500 weight font.</p>  
 
<p class="bor-test9">Here we use 600 weight font.</p>   

<p class="bor-test10">Here we use 700 weight font.</p>   

<p class="bor-test11">Here we use 800 weight font.</p>  
 
<p class="bor-test12">Here we use 900 weight font.</p>  

</body>  
</html>

 

Output

Here we use bold.

Here we use bolder font.

Here we use lighter font.

Here we use 100 weight font.

Here we use 200 weight font.

Here we use 300 weight font.

Here we use 400 weight font.

Here we use 500 weight font.

Here we use 600 weight font.

Here we use 700 weight font.

Here we uses 800 weight font.

Here we use 900 weight font.

Related Posts:

Pin It on Pinterest

Shares
Share This