HTML<font> Tag

Follow these step-by-step examples to see how the font tag attributes work individually.

Step 1: The "size" Attribute

Values range from 1 (smallest) to 7 (largest). Default is 3.

Code:
<font size="1">Size 1</font>
<font size="3">Size 3 (Default)</font>
<font size="7">Size 7 (max)</font>
Result:
Size 1
Size 3 (Default)
Size 7 (max)

Step 2: The "color" Attribute

Accepts color names or Hex codes (#RRGGBB).

Code:
<font color="red">i am red</font>
<font color="blue">i am blue</font>
<font color="green">i am green</font>
Result:
I am Red
I am Blue
I am Forest Green

Step 3: The "face" Attribute

Defines the typeface (font family) of the text.

Code:
<font face="arial">Arial</font>

<font face="Courier New (Classic Serif)"> Courier New (Classic Serif)</font>

<font face="Georgia (Classic Serif)"> Georgia (Classic Serif)</font>
Result:
Arial Font
Courier New (Typewriter)
Georgia (Classic Serif)

Real Use Example: A Retro Banner

Combining all three attributes to create a specific design style.

FLASH SALE!
Get 50% off all HTML courses this weekend.

Click here to learn more
G o o g l e
Happy New Year

Modern Comparison (CSS vs Font Tag)

Task The Old Way (<font>) The Modern Way (CSS)
Blue Text <font color="blue"> <span style="color: blue;">
Large Text <font size="5"> <span style="font-size: 24px;">
Arial Font <font face="Arial"> <span style="font-family: Arial;">