HTML Fonts

HTML has an amazing font tag that helps in customizing the colors, sizes, and styles of web page fonts. In this chapter, you will learn about the primary <font> tag and its importance.

Table of Contents

Note: 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 styles attracts the entire website and beautifies the content. Proper style and color to the font can make your document more user-friendly and readable. The type of font and its color supportability depend 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 text in web pages can be done at any moment in HTML coding. You have to use <font> tag to do this.

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:

<!DOCTYPE html>
<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 the font size relative to the original font size. It is termed 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:

<!DOCTYPE html>
<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 the font tag.

Example:

<!DOCTYPE html>
<html>

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

</html>
Found This Page Useful? Share It!
Get the Latest Tutorials and Updates
Join us on Telegram