Bookmark and Share

HTML - Font

The <font> tag provides no real functionality by itself, but with the help of a few attributes, this tag is used to change the style, size, and color of HTML text elements. The size, color, and face attributes can be used all at once or individually, providing users with the ability to create dynamic font styles for any HTML element.

Advertise on Tizag.com

Note: The <font> and <basefont> tags are deprecated and should not be used for published work. Instead, use CSS styles to manipulate your font. See our CSS Tutorial for more information.

HTML - Font Size

Set the size of your font with size. The range of accepted values goes from 1 -- the smallest, to 7 -- the largest. The default size of a font is 3.

HTML Font Size Code:

<p>
<font size="5">Here is a size 5 font</font>
</p>

HTML Font Size Attribute:

Here is a size 5 font.

HTML - Font Color

Set the color of your font with color.

HTML Font Color Code:

<font color="#990000">This text is hex color #990000</font>
<br />
<font color="red">This text is red</font>

HTML Font Color Attribute:

This text is hex color #990000
This text is red

HTML - Font Face

Choose a different font face by specifying any font you have installed. Font face is synonymous with font type. As a web designer, be aware that if you specify a custom font type and users viewing the page don't have the exact same font installed, they will not be able to see it. Instead the chosen font will default to Times New Roman. To reduce the risk of running into this situation, you may provide a list of several fonts with the face attribute, such as outlined below.

HTML Font Face Code:

<p>
<font face="Georgia, Arial, Garamond">This paragraph
 has had its font...</font>
</p>

HTML Font Face Attribute:

This paragraph has had its font formatted by the font tag!

In the example above, we have changed the font face (type) of a paragraph element and specified a list of similar fonts to apply to this element in the case that some of our viewers do not have these fonts installed.

HTML Font - Attribute Review

HTML Font Attributes:

Attribute="Value"Description
size="Num. Value 1-7"Size of your text, with 7 being biggest
color="rgb,name,or hexidecimal"Font color
face="name of font"Font type

Beautiful First Letter Style

Customize your fonts to achieve any desired look.

HTML Code:

<p><font size="7" face="Georgia, Arial" color="maroon">C</font>ustomize
 your font to achieve a desired look.</p>

Beauty & Grace:

Customize your font to achieve a desired look.
Bookmark and Share


Tips

  • Don't use font tags if at all possible! Use CSS Styles instead!
  • Fonts add character and originality to sites, so long as they're not overused or unreadable.
  • Use consistent fonts throughout your site.
  • Nobody enjoys websites that are hard to read, so keep your fonts legible!
  • Use formatting tags rather than the font tag for bold or italic texts.


Found Something Wrong in this Lesson?

Report a Bug or Comment on This Lesson - Your input is what keeps Tizag improving with time!

Advertise Here

More Tutorials!
Microsoft Office Tutorials Artist Tutorials