Previous Next

HTML Fonts

The font tag is containg following three attributes to customize fonts

  • size
  • color
  • face

The fonts are deprecated and should not be used, use CSS styles instead.

 


 

HTML Font Size

You can set 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.

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>

Result:

Font size="1"
Font size="2"
Font size="3"
Font size="4"
Font size="5"
Font size="6"
Font size="7"

 

 

Relative Font Size

Realtive font size can be used w.r.t to previous font size.

Example:  <font size="+2"> or <font size="-4">

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>

Result:

Font size="-1"
Font size="+1"
Font size="+2"
Font size="+3"
Font size="+4"

 

Setting Font Face

Font face can be changed using face attribute.

Specified font should be intalled on user's computer for this to work, otherwise default font will be used.

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>

This will produce following result:

Times New Roman
Verdana
Comic Sans MS
WildWest
Bedrock

 

Alternate font faces

Alternate font face can be defined, separated by comma.

If the first font specified is not found on users computer then next specified will be used.

<font face="arial,helvetica">
<font face="Lucida Calligraphy,Comic Sans MS,Lucida Console">

 


 

 

HTML Font Color

Define font color using color attribute.

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>

Result:

This text is in pink
This text is red

 

 

The <basefont> Element:

The <basefont> element is used to set a default font size, color, and typeface for the document.

Use the <font> elements to override the <basefont>.

Example

<!DOCTYPE html>
<html>
<head>
<title>Setting Basefont Color</title>
</head>
<body>
<basefont face="arial, verdana, sans-serif" size="2" color="#ff0000">
<p>This is the page's default font.</p>

<h2>Example of the &lt;basefont&gt; Element</h2>
<p><font size="+2" color="darkgray">
This is darkgray text with two sizes larger
</font></p>

<p><font face="courier" size="-1" color="#000000">
It is a courier font, a size smaller and black in color.
</font></p>

</body>
</html>

Result:

This is the page's default font.

Example of the <basefont> Element

This is darkgray text with two sizes larger

It is a courier font, a size smaller and black in color.


Previous Next