CSS HTML Font Family

Ad Banner Image

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.

HTML Font Family
Fig.1 – HTML Font Family

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.

CSS Font Family
Fig.2 – Font Family Example
Sponsor Banner
You can leave a response, or trackback from your own site.
Leave a Reply to the article


Learn CSS

Learning & Certifications
Follow Us
Facebook Icon   Linked In Icon   Twitter Icon  
Validation and Recognition

Valid CSS! Valid HTML5!

Powered by Wordpress