HTML Fonts

HTML Fonts

Html Font and basefont

The <font> tag is used to add style, size, and color to the text on your site. Use the sizecolor, and face attributes to customize your fonts. Use a <basefont> tag to set all of your text to the same size, face, and color.

The font and basefont tags are deprecated and should not be used. Instead, use css styles to manipulate your font.

font size

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

HTML Code:

<p>
<font size=”5″>Here is a size 5 font</font>
</p>

OUTPUT:

Here is a size 5 font.

Font Color

Set the color of your font with color.

HTML Code:

<font color=”#990000″>This text is hexcolor #990000</font>
<br />
<font color=”red”>This text is red</font>

OUTPUT:

This text is hexcolor #990000
This text is red

font face

Choose a different font face using any font you have installed. Be aware that if the user viewing the page doesn’t have the font installed, they will not be able to see it. Instead they will default to Times New Roman. An option is to choose a few that are similar in appearance.

HTML Code:

<p>
<font face=”Bookman Old Style, Book Antiqua, Garamond”>This paragraph has had its font…</font>
</p>

Font Face:

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

Basefont – set a solid base

With the basefont tag you will be able to set the default font for your web page. We highly recommend specifying a basefont if you plan on using any font with HTML. Below is the correct way to set your basefont.

HTML Code:

<html>
<body>
<basefont size=”2″ color=”green”>
<p>This paragraph has had its font…</p>
<p>This paragraph has had its font…</p>
<p>This paragraph has had its font…</p>
</basefont>
</body>
</html>

OUTPUT:

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

However, the use of basefont is deprecated, which means it may not be supported sometime in the future. The perfectly correct way to change your sites basefont is to set it with CSS.

Attribute review

Attribute “Value” Description
size= “Num. Value 1-7” Size of your text, 7 is biggest
color= “rgb,name,or hexidecimal” Change font color
face= “name of font” Change the font type

Beautiful first letter style

You can easily customize your fonts to achieve any of your desired looks.

HTML Code:

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

OUTPUT:

Customize your font to achieve a desired look.

Tips

  • Don’t use font tags if at all possible! Use CSS Styles instead!
  • Fonts add character and orginality to sights, so long as they’re not overused or unreadable.
  • Use consistant fonts throughout your site.
  • Nobody enjoys sights that are hard to read, keep your fonts legible!

Use formatting tags rather than the font tag for bold or italic texts.