CSS HTML Font Family

March 17th, 2019

Nilesh Chaurasia

CSS Font Family

To change the default font face of the text of web page, Font Family property is used. To give the attractive touch to text and make web page more beautiful.

Font Family Types

Here 2 types of Font Family name

generic family – a group of similar font face (like Serif or Monospace)
font family – a particular font family (like “Times New Roman” or “Arial”)

Generic Family	Font Family	Explanation
Monospace	Courier New, Lucida Console	All the characters of text have same width.
Serif	Times New Roman, Georgia	The characters have small lines at the ends.
Sans-serif	Arial, Verdana	A normal characters or characters does not have small lines at the ends.

Note: If the name of the font-family is greater than one than you have to write this font-family name inside double inverted comma(“Times New Roman”).

Example 1 – Font Family Example with HTML

<!DOCTYPE html>
<html>
  <head>
	<style>
	  .serif 
	   {
		font-family: "Times New Roman", Times, serif;
	   }
	  .sansserif 
	   {
		font-family: Arial, Helvetica, sans-serif;
	   }
	</style>
  </head>
  <body>
	<h3>Example of font-family serif</h3>
	<p class="serif">Lorem ipsum dolor sit amet,quis nostrud exercitation aliquip ex ea commodo consequat.</p>
	<h3>Example of font-family sans-serif</h3>
	<p class="sansserif">Lorem ipsum dolor sit amet,quis nostrud exercitation aliquip ex ea commodo consequat.</p>
  </body>
</html>

Here the above code shows that how can you change the font face of the text.

Note: In case browser does not support first font-family than second font-family is support than it will be shown and if also second font-family does not support than which font is support from the generic-family it will be shown.

Example 2 – Font Family Example with Monospace

<!DOCTYPE html>
<html>
  <head>
	<style>
	  .monospace 
	   {
		font-family: "Courier New";
	   }
	</style>
  </head>
  <body>
	<h3>Example of font-family monospace</h3>
	<p class="monospace">Lorem ipsum dolor sit amet,quis nostrud exercitation aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum pariatur.</p>
  </body>
</html>

Here the above code shows Monospace Characters.