Learnerslesson
   JAVA   
  SPRING  
  SPRINGBOOT  
 HIBERNATE 
  HADOOP  
   HIVE   
   ALGORITHMS   
   PYTHON   
   GO   
   KOTLIN   
   C#   
   RUBY   
   C++   
   HTML   
   CSS   
   JAVA SCRIPT   
   JQUERY   
JAVA SPRING SPRINGBOOT HIBERNATE HADOOP HIVE ALGORITHMS PYTHON GO KOTLIN C# RUBY C++ HTML CSS JAVA SCRIPT JQUERY


❮❮ PREV NEXT ❯❯


CSS - Font Family


The font-family property in CSS lets you choose a suitable font for your website. It makes your text look attractive and visually appealing.


There are five types of Font Families that CSS supports.


Types of Font Family in CSS

  1. Cursive Fonts


    These fonts are like human handwriting. For example, Brush Script MT, Lucida Handwriting.

  2. Fantasy Fonts


    These fonts are decorative fonts. For example, Copperplate, Papyrus.

  3. Serif Fonts


    These Fonts have small stroke at the edge of each letter. For example, Times New Roman, Georgia.

  4. San-Serif Fonts


    These Fonts are clean fonts with no stroke. For example, Arial, Helvetica.

  5. Monospace Fonts


    In these type of Fonts every letter have same width. For example, Courier New, Lucida Console.

Example of Font Family in CSS


Example : 



<html>
<head>
	<style>
		p {
  			font-family: Courier New;
  		}
	</style>	
</head>
	
<body>
	<p> 
		This is the first paragraph.
	</p>
</body>
</html>


Output :



 

So, in the above example, we have set the value of font-family property as Courier New.


<style>
	p {
		font-family: Courier New;
	}
</style>

And if you look at the above output. The text This is the first paragraph changes accordingly.


Font-size property in CSS


We can also increase the size of the text in CSS using the font-size property.


Example : 



<html>
<head>
	<style>
		p {
  			font-family: Courier New;
  			font-size: 50px;
  		}
	</style>	
</head>
	
<body>
	<p> 
		This is the first paragraph.
	</p>
</body>
</html>


Output :



 

So, in the above example, we have set the size of the text as 50px using the font-size property.


font-size: 50px;


❮❮ PREV NEXT ❯❯