Enroll Course

100% Online Study
Web & Video Lectures
Earn Diploma Certificate
Access to Job Openings
Access to CV Builder

Outlines

What Are HTML Fonts

Set Font Size

Relative Font Size

Setting Font Face

Specify Alternate Font Faces

Setting Font Color

ENROLL NOW

HTML - Fonts

What are HTML Fonts

Fonts play a very important role in making a website more user-friendly and increasing content readability. Font face and color depend entirely on the computer and browser that is being used to view your page but you can use HTML tag to add style, size, and color to the text on your website. You can use a <basefont> tag to set all of your text to the same size, face, and color.

The Font Tag has 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  tag. The text that follows will remain changed until you close with the  tag. You can change one or all of the font attributes within one  tag.

Note −The font and basefont tags are deprecated and it is supposed to be removed in a future version of HTML. So they should not be used rather, it's suggested to use CSS styles to manipulate your fonts. But still for learning purpose, this chapter will explain font and basefont tags in detail.

Set Font Size

You can set the content font size using the size attribute. The range of values that are accepted 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>

The above code will be displayed as:

Relative Font Size

You can set how many sizes larger or how many sizes smaller than the default font size should be. You can specify by doing or

Example

The below code is the proper code syntax on how to use relative font-size:

<!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>

The above code will be displayed as:

Setting 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, the 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>

The above code will be displayed as:

Specify alternate font faces

A user will only be able to see your font if they have that particular font already installed on their computer. So, it is possible to set two or more font face alternatives by just inputting the font face names, separated by a comma.

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

When your web page is loaded, their web browser will render the first font face that is available. If none of the given fonts that you have specified are installed, then it will automatically display the default font face Times New Roman.

Setting Font Color

You can set the color of your font when displayed by using the color attribute inside the  tag. You can also specify the color that you want by using either the name of the color or the hex code for that particular 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>