How To Change Fonts Using HTML

HMTL code photo

Changing fonts is one way to spice up a webpage. It can also be useful to create headers, emphasis, or differentiation on a webpage. There are many ways to display fonts, whether through typing the information into your webpage or using cool new fonts as titles - in which case, you'll probably want to turn those words into images (I'll explain why below).  

The following steps will allow you to change your fonts with HTML.

  1. Decide how you want to use your font. Changes in font can be used in many different ways. For example, they can create headers:

    How To Fish

    To fish, you'll need a fishing pole and a lot of patience. It is necessary, when fishing, to have your eye set on some sort of bait. Never let boredom set in too soon-- you'll fall asleep with a fish on your line!...

    Or (combined with other attributes) they can create fancy style effects:

    Once upon a time. . .

    Those are just a couple examples of using HTML to change font.

  2. Decide which font you want to use. This is an important step. You could, theoretically, choose any font in existence, but the truth of the matter is that the font will only show up on computers that have installed that same font. So, if you choose an obscure font that you've downloaded from the web or make your own, chances are that very few others will be able to see it. To play it safe, choose one of the following fonts, which are standard on most computers:
    • Times New Roman (the default font)
    • Helvetica
    • Courier
    • Serif
    • Sans-serif
    • Monospace
    • Fantasy

    You can choose more obscure fonts if you'd like (such as Comic Sans MS or Papyrus), but they are not guaranteed to work.

  3. Construct your tag. Your tag should be constructed as follows:

    <font face="NAME OF YOUR FONT"></font>

    The current programming standard is to write the name of your font in lowercase letters. If you choose to use a more obscure font, a wise thing to do is list several fonts in your tag attribute, as in the following example:

    <font face="papyrus, georgia, helvetica">

    This way, if the computer fails to display the first font (if it cannot find it in its memory) it will display the next on the list, and so on.

  4. Copy the tag into the body of your HTML. Copy and paste (or write in) the tag you've constructed to the place on your webpage where you want to font to be changed. All text that you want in the specified font should fall between the <font face="FONT"> and </font> tags. The problem with the <font> tag is that when you use certain other HTML effects, such as tables, you will have to keep inserting your <font> tag to keep it working (ex. the <td> kills your font). To remedy this, use the <basefont> tag like so:

    <basefont face="NAME OF YOUR FONT">

    Paste this tag in the body of your HTML (between the <body> tags) before all text on the page. Note: this tag does not work in all browsers.


Share this article!

Follow us!

Find more helpful articles: