Introduction to Font Tag in HTML

Font Tag in HTML is one of the most important attributes used to make webpage or HTML documents more attractive. It has the properties to change the size, color, and style of included text. With the help of a font tag, one can make a web page’s size, color, and face in the same text format. This tag mainly works on three major attributes like size, Face or Type and color. Font tag works as an inline element in HTML to change some features of block text in HTML documents. The text enclosed within tag is used to define style to the text included in it.

Syntax:

Above syntax status that font size is the attribute into the syntax is used to set the specific size to the text. This size can be defined in number from 1 to 7, where 1 is for the smallest text and 7 for the largest text size. The face attributes in the font tag used to define the type of font type in our HTML document, whereas the color attribute is used to define the specific color to the enclosed text.
HTML tag used within the <body> tag. It’s define using .. tag in HTML.

<body> </body>

This tag supports Global as well as Event attributes too. Also, it supports some other attributes which areas listed below:

Attribute Name	Detail Description
Size	This attribute is used to define a specific size for text in between 1 to 7.
Face or type	This attribute is used to define the font type for the included text.
Color	This attribute is used to show enclosed text in a different color.
Weight	This attribute defines the boldness of the text of the font tag.

Examples of Font Tag in HTML

Font tag can be used in two ways in HTML code, first as include font tag and its attribute value through HTML and second is by using define attribute value as CSS code. Both will generate the same output. The only difference in defining attributes value.

Example #1

Defining font tag with its attribute value:

Code:

<!DOCTYPE html> <html> <head> <title>Font Tag in HTML</title> </head> <body> <h2>Example of Font Tag in HTML </h2> General text without any Font tag attribute value Text having normal font size and font face . Only changing font color Text having different font face. Text with Increased font size having default font type. </body> </html>

Output:

Example #2

Define the font tag with its attribute value defined through CSS:

Code:

<!DOCTYPE html> <html> <head> <title>Font Tag in HTML</title> </head> <body> <h2>Example of Font Tag in HTML using CSS </h2> Someone’s sitting in the shade today because someone plated a tree a long time ago. Someone’s sitting in the shade today because someone plated a tree a long time ago. Someone’s sitting in the shade today because someone plated a tree a long time ago. Someone’s sitting in the shade today because someone plated a tree a long time ago. </body> </html> Popular Course in this categoryHTML Training (12 Courses, 19+ Projects, 4 Quizzes)12 Online Courses | 19 Hands-on Projects | 89+ Hours | Verifiable Certificate of Completion | Lifetime Access | | 4 Quizzes with Solutions
4.5 (6,492 ratings)Course Price
₹6999 ₹41999
View Course

Output:

Example #3

In this example, we are using a Font tag with attribute value size, which will define text from lowest size to highest size as shown below:

HTML Code:

<!DOCTYPE html> <html> <head> <title>HTML font tag</title> </head> <body> People may doubt what you say, but they will believe what you do. People may doubt what you say, but they will believe what you do. People may doubt what you say, but they will believe what you do. People may doubt what you say, but they will believe what you do. People may doubt what you say, but they will believe what you do. People may doubt what you say, but they will believe what you do. People may doubt what you say, but they will believe what you do. </body> </html>

Output:

Example #4

HTML Code:

<!DOCTYPE html> <html> <head> <title>HTML tag with Font Type attribute</title> </head> <body> Correct one fault at a time. Concentrate on the one fault you want to overcome. Correct one fault at a time. Concentrate on the one fault you want to overcome. Correct one fault at a time. Concentrate on the one fault you want to overcome. Correct one fault at a time. Concentrate on the one fault you want to overcome. Correct one fault at a time. Concentrate on the one fault you want to overcome. Correct one fault at a time. Concentrate on the one fault you want to overcome. </body> </html>

Output:

Example #5

HTML Code:

<!DOCTYPE html> <html> <head> <title>HTML Font tag-Color </title> </head> <body> It is terrible thing to see and have no vision Today's preparation Success depends on your backbone not your wishbone. Patience makes lighter what sorrow may not heal Hold fast to dreams, for if dreams die, life is broken winged bird that cannot fly </body> </html>

Output:

Conclusion

Font tag in HTML is used to display text in the same size, color and face format. The font tag is going to displayed by using .. tag.
From all the above information, we came to know that size, type of face, color are the key attributes in font style.

Introduction to Font Tag in HTML