HTML Fonts

HTML has amazing font tag that helps to customize the colors, shapes, and styles of web page fonts. In this chapter, you will learn about the basic <font> tag and its importance.

The HTML font tag is obsolete and is not supported in HTML5. CSS is used instead.

HTML font Tag

Text having high readability and different style attracts the entire website and beautifies the content within. Proper use of style and color to font can make your document more user-friendly and readable as well. The style of font along with its color supportability totally depends on the web browser which the user will use for seeing the web pages. Form an HTML coder's point, it is done using the FONT tag which is written as:

Syntax:
<font>This is an Sample text.</font>

and includes its three attributes for adding different styles as well as increase or decrease size according to our choice and can play with text's color which will get wrapped in your web page.

For customizing your font, HTML provides three different attributes. These are the:
  • size
  • color
  • face

This customization of texts in web pages can be done at any moment of HTML coding. You simply have to use the <font> tag in order to perform that.

Font Size Setup in HTML

Texts in web development using HTML can be sized accordingly using the size attribute of font tag. The size ranges from 1 up to 7 from lowest to highest.

Example:
<html>
<head>
<title>Font size Example</title>
</head>

<body>

<font size = "7">Here font size is 7 which is highest</font> <br/>

<font size = "6">Here font size is 6</font> <br/>

<font size = "5">Here font size is 5</font> <br/>

<font size = "4">Here font size is 4</font> <br/>

<font size = "3">Here font size is 3</font> <br/>

<font size = "2">Here font size is 2</font> <br/>

<font size = "1">Here font size is 1 which is lowest</font> <br/>

</body>
</html>

Moreover, you can customize font size relative to the original font size. This is termed as relative font sizing.

Example:
<font size = "+2">The font size is set relatively<font>

Font Style Setup in HTML

This is made possible using the face attribute of the font tag.

Example:
<html>
<body>

<font face = "WildWest" size = "4">Font style Example 1</font> <br/>
<font face = "Monotype Corsiva" size = "6">Font style Example 2</font>

</body>
</html>

Font Color Setup in HTML

This can be set using the color attribute of font tag.

Example:
<html>
<body>

<font color = "#0000FF"> Color change using Hex value </font><br/>
<font color = "aqua"> Color change using color name </font>

</body>
</html>

Courses
Subscribe Updates via Email

Join 49,000+ W3schools lovers and get all the latest tutorials, programs, algorithms in your inbox.