HTML HTML intro.
  1. HTML intro
  2. Web pages and you
HTML basics
  1. HTML getting started
  2. HTML basics
  3. HTML document
HTML text
  1. HTML text formatting 1
  2. HTML text formatting 2
  3. HTML text formatting 3
  4. HTML fonts
  5. HTML entities
HTML links
  1. HTML links
  2. HTML email links
HTML images
  1. HTML images
  2. HTML image maps
HTML forms
  1. HTML forms
  2. HTML form labels
  3. HTML fieldset/legend
HTML tables
  1. HTML tables
  2. HTML tables concepts
HTML frames
  1. HTML frames
HTML backgrounds/color
  1. HTML backgrounds
  2. HTML colors
  3. HTML color shades
  4. HTML color usage
HTML style/layout
  1. HTML stylesheets
  2. HTML div/span
HTML media
  1. HTML audio
  2. HTML video
  3. HTML objects
  4. HTML download media
HTML declaratives
  1. HTML head section
  2. HTML meta tags
  3. HTML scripts
  4. HTML declarations
  5. HTML document types
Practical HTML
  1. HTML tag rules
  2. HTML things to avoid
  3. URL formatting
  4. URL encoding/decoding
  5. HTML use/access
  6. HTML publish work
HTML extras
  1. HTML marquees
HTML wrap-up
  1. HTML history
  2. HTML summary

HTML font

What would text on the web be if there was no way to style it? Surely, a page would not have much character. Font is an important element on the world wide web. The default appearance of text is not very exciting, but with fonts you can change it by adding much style to your text.

This tutorial focuses on:

The <font> tag

With the <font> tag you can set the size, color, and font of text.

Attributes of the <font> tag
Example:
<font size="5">Text in font size 5</font> <font size="4" face="Georgia" color="green">Green text in a font size 4 in a Georgia font</font> <font size="2" face="Arial" color="gray">Small gray arial text</font>
Output:
Text in font size 5 Green text in a font size 4 in a Georgia font Small gray arial text

The <font> tag is deprecated. CSS should be used instead.

The <basefont> tag

The <basefont> tag can be used to specify a general appearance for text on a webpage. It should be placed right after the <body> tag.

NOTE: The <basefont> tag has the same attributes as the <font> tag.

Example:
<html> <head> <title>Basefont</title> </head> <body> <basefont size="5" face="Verdana, Arial, Helvetica" color="blue" /> This text will be in a size of 5, have a Verdana font, and will be blue </body> </html>
Output:
This text will be in a size 5, have a Verdana font, and will be blue

NOTE: If you specify a list of fonts with the face attribute like in the above example, the visitor's web browser will use the first font in the list that is available on the visitor's computer. Meaning, if someone is viewing a webpage and their computer does not support the first font you specify, the browser will try the second font and so on until it gets to a font that is supported. This applies to the <basefont> tag as well as the <font> tag.

The <basefont> tag:

Different Fonts

There are many different fonts available to use, but it is generally a good idea to use the common ones since those are what most peoples computers support.

Common fonts example:
<font face="Arial">This text is in an 'Arial font'</font> <font face="Comic Sans MS">This text is in a 'Comic Sans MS' font (NOTE: The 'Comic Sans MS' font is highly frowned upon)</font> <font face="Courier New">This text is in a 'Courier New' font</font> <font face="Georgia">This text is in a 'Georgia' font</font> <font face="Lucida Console"> This text is in a 'Lucida Console' font </font> <font face="Tahoma">This text is in a 'Tahoma' font</font> <font face="Times New Roman"> This text is in a 'Times New Roman' font </font> <font face="Trebuchet MS">This text is in a 'Trebuchet MS' font</font> <font face="Verdana">This text is in a 'Verdana' font</font> <font face="MS Serif">This text is in a 'MS Serif' font</font>
Output:
This text is in an 'Arial font' This text is in a 'Comic Sans MS' font (NOTE: The 'Comic Sans MS' font is highly frowned upon) This text is in a 'Courier New' font This text is in a 'Georgia' font This text is in a 'Lucida Console' font This text is in a 'Tahoma' font This text is in a 'Times New Roman' font This text is in a 'Trebuchet MS' font This text is in a 'Verdana' font This text is in a 'MS Serif' font

Transition to CSS

The <font> tag and <basefont> tag are both deprecated.

With the <font> tag, you have to specify text for so many different elements. Imagine what it would be like to have to go and change 5, 10, even 20 different styles manually? Such is the case with the <font> tag.

The <basefont> tag does make things easier. Since it dictates a universal style, it is easier to change things with it when necessary, but still requires editing HTML files.

The transition to CSS allows for a declaration of font styles in a separate language (and no editing of HTML files required). This makes things so much easier for the web developer as changing font styles does not require editing any tags but rather declarations that will affect the font styles of elements which you specify.

If you want to jump right into styling fonts with CSS, read our CSS font properties page.

© Copyright 2013-2014 Landofcode.com
Terms of use | Privacy policy | Copyright information