HTML Font

fonts in html

HTML Font tag is used to define the font style for the text contained within it. It defines the font size, color, and face or the text in an HTML document.

The font tag is having three attributes called size, color, and face to customize your fonts. To change any of the font attributes at any time within your webpage, simply use the <font> tag. The text that follows will remain changed until you close with the </font> tag. You can change one or all of the font attributes within one <font> tag.


Set HTML Font Size:

You can set content font size using size attribute. The range of accepted values is from 1(smallest) to 7(largest). The default size of a font is 3.

HTML Font Example:

 <!DOCTYPE html>
<html>
   <head>
      <title>Setting Font Size</title>
   </head>
   <body>
      <font size = “1”>Font size = “1”</font><br />
      <font size = “2”>Font size = “2”</font><br />
      <font size = “3”>Font size = “3”</font><br />
      <font size = “4”>Font size = “4”</font><br />
      <font size = “5”>Font size = “5”</font><br />
      <font size = “6”>Font size = “6”</font><br />
      <font size = “7”>Font size = “7”</font>
   </body>
</html>

Following are some specifications about the HTML <font> tag

DisplayInline
Start tag/End tagBoth Start and End tag
UsageFont Style


Relative Font Size:                                                             

You can specify how many sizes larger or how many sizes smaller than the preset font size should be. You can specify it like <font size = “+n”> or <b><font size = “-n”>

Example:

<!DOCTYPE html>
<html>
   <head>
      <title>Relative Font Size</title>
   </head>
   <body>
      <font size = “-1”>Font size = “1”</font><br />
      <font size = “+1”>Font size =”+1″</font><br />
      <font size = “+2”>Font size =”+2″</font><br />
      <font size = “+3”>Font size =”+3″</font><br />
      <font size = “+4”>Font size = “+4″</font>
</body>
</html>

Setting HTML Font Face:

You can set font face using face attribute but be aware that if the user viewing the page doesn’t have the font installed, they will not be able to see it. Instead user will see the default font face applicable to the user’s computer.

Example:

<!DOCTYPE html>
<html>
   <head>
      <title>Font Face</title>
   </head>
   <body>
      <font face = “Times New Roman” size = “5”>Times New Roman</font><br />
      <font face = “Verdana” size = “5”>Verdana</font><br />
      <font face = “Comic sans MS” size =” 5″>Comic Sans MS</font><br />
      <font face = “WildWest” size = “5”>WildWest</font><br />
      <font face = “Bedrock” size = “5”>Bedrock</font><br />
   </body>
</html>

Setting Font Color:

You can set any font color you like using color attribute. You can specify the color that you want by either the color name or hexadecimal code for that color.

Example:

<!DOCTYPE html>
<html>
   <head>
      <title>Setting Font Color</title>
   </head>
   <body>
      <font color = “#FF00FF”>This text is in pink</font><br />
      <font color = “red”>This text is red</font>
   </body>
</html>

Recommended posts:

Spread the love

Leave a Comment

Your email address will not be published. Required fields are marked *