HTML Fonts
HTML has an amazing font tag that helps to customize the colors, shapes, and styles of web page fonts. In this chapter, you will learn about the primary <font> tag and its importance.
The HTML font tag is obsolete and is not supported in HTML5. CSS is used instead.
Table of Contents
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 the font can make your document more user-friendly and readable. The style of font, along with its color supportability, 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>
It includes its three attributes for adding different styles and increasing or decreasing 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 have to use the <font> tag to perform that.
Font Size Setup in HTML
Texts in web development using HTML can be sized accordingly using the size attribute of the 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>
Try it Yourself
Moreover, you can customize the font size relative to the original font size. It 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>
Try it Yourself
Font Color Setup in HTML
This can be set using the color attribute of the 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>
Try it Yourself