html fonts

HTML Font Tag Definition and Usage

  • The HTML <font> tag defines the font, color, size of the text.
  • HTML <font> tag is very important to beautify of Text on your web page.
  • Font face and color depends on the computer and browser that is being used to view your page. But the <font> tag is used to add style, size, and color to the text on your web page. You can also use <asefont> tag to set all of your text to the same size, face, and color.
  • HTML Font tag is having three attributes called size, color, and face.

HTML Font Size

  • You can set the size of your font by using size attribute.
  • The default size of a font is 3.
  • The range of font size values is from 1 to 7. 1 is smallest and 7 is largest.

Example : HTML Font Size.

<html> 
<head>    
<title> HTML Font Size Examples </title> 
</head> 
<body>    
<!-- Now we are using HTML Font Size -->		
<font size="1"> HTML Font Size = " 1 " </font>	
<font size="2"> HTML Font Size = " 2 " </font>	
<font size="3"> HTML Font Size = " 3 " </font>	
<font size="4"> HTML Font Size = " 4 " </font>	
<font size="5"> HTML Font Size = " 5 " </font>	
<font size="6"> HTML Font Size = " 6 " </font>	
<font size="7"> HTML Font Size = " 7 " </font> 
</body> 
</html>

Output :

HTML Font Size = ” 1 ”
HTML Font Size = ” 2 ”
HTML Font Size = ” 3 ”
HTML Font Size = ” 4 ”
HTML Font Size = ” 5 ”
HTML Font Size = ” 6 ”
HTML Font Size = ” 7 ”

You can specify the relative font size how many sizes larger or how many sizes smaller than the preset font size should be..

Example : HTML Font Size.

<html> 
<head>    
<title> HTML Relative Font Size Examples </title> 
</head> 
<body>    
<!-- Now we are using HTML Relative Font Size -->		
<font size="-2"> HTML Relative Font Size = " -2 " </font>	
<font size="-1"> HTML Relative Font Size = " -1 " </font>	
<font size="+1"> HTML Relative Font Size = " +1 " </font>	
<font size="+2"> HTML Relative Font Size = " +2 " </font>	 
</body> 
</html>

Output :

HTML Relative Font Size = ” -2 ”
HTML Relative Font Size = ” -1 ”
HTML Relative Font Size = ” +1 ”
HTML Relative Font Size = ” +2 ”

HTML Font Face

  • You can set the font face means design of your font by using face attribute.
  • The default face of a font is Times New Roman.
  • You can set any font according to your choice using face attribute but must be important that if the user want viewing the page doesn’t have the font installed, they will not be able to see it.

Example : HTML Font Face.

<html> 
<head>    
<title> HTML Font Face Examples </title> 
</head> 
<body>     
<!-- Now we are using HTML Font Face -->		
<font face="Arial"> HTML Font Face Arial </font>	
<font face="Helvetica"> HTML Font Face Helvetica </font>	
<font face="Verdana"> HTML Font Face Verdana </font>	
<font face="sans-serif"> HTML Font Face sans-serif </font>	
<font face="monospace"> HTML Font Face monospace </font> 
</body> 
</html>

Output :

HTML Font Face Arial
HTML Font Face Helvetica
HTML Font Face Verdana
HTML Font Face sans-serif
HTML Font Face monospace

HTML Font Color

  • You can set the font Color of your font by using Color attribute.
  • The default Color of a font is black.
  • You can set any font Color according to your choice using Color attribute to text viewing beautiful.
  • You can define the color that you want by either the color name or hexadecimal code for that color.

Example : HTML Font Color.

<html> 
<head>    
<title> HTML Font Color Examples </title> 
</head> 
<body>     
<!-- Now we are using HTML Font Color -->		
<font color="red"> HTML Font Color =" red " </font>	
<font color="blue"> HTML Font Color =" blue " </font>	
<font color="#CC0000"> HTML Font Color =" #CC0000 " </font>	
<font color="#666666"> HTML Font Color =" #666666 " </font>	
<font color="#996600"> HTML Font Color =" #996600 " </font> 
</body> 
</html>

Output :

HTML Font Color =” red ”
HTML Font Color =” blue ”
HTML Font Color =” #CC0000 ”
HTML Font Color =” #666666 ”
HTML Font Color =” #996600 ”

About Author

My name is Mukesh Jakhar and I am a Web Application Developer and Software Developer, currently living in Jaipur, India. I have a Master of Computer Application in Computer Science from JNU Jaipur University. I loves to write on technology and programming topics. Apart from this, I love to travel and enjoy the beauty of nature.

Sign up for weekly update

Milkshake is almost ready. If you're interested in testing it out, then sign up below to get exclusive access.