So You Want To Change Your Font, Huh?

By Joe Burns

     I have been asked time and time again how to get the font face to change in HTML. I'm assuming you already know you can change font size through the use of "H" and "FONT" number commands. If what I just said is Greek to you - see Basic HTML: Manipulating Text   for a few more details on the process.

     Below is what I'm talking about. I have listed a few font face commands that you can use. All I did was simply write this tutorial while reading the fonts available in my WORD text editor and entered all of the font faces available with the little "TT" next to them. Here are just a few of the ones that worked. Follow the format below for your page.

Every Font Will Not Work Everywhere...
     This is very important! A text font command will only work if the font you call for is loaded on the computer displaying the page.

     For example, you head to one of those million-font sites and download a really neat but obscure font face. You load it onto your system and set it in the code. One your computer the text font will display just fine. Not so on just about every other computer in the universe. The font face isn't loaded onto those computers.

     What to do, what to do?

     Well, don't use non-traditional font first off. However, if there is a font you simply MUST have on your page, then why not use an image editor and create an image that has the font and text on it? That way the computers load an image with the text and the text displays. Cool, huh?

     Dig these examples...and keep reading. I have one more tip afterwards.



This is regular font

<FONT FACE="arial">arial font</FONT>

<FONT FACE="algerian">algerian font</FONT>

<FONT FACE="bookman">bookman font</FONT>

<FONT FACE="braggadocio">braggadocio font</FONT>

<FONT FACE="courier">courier font</FONT>

<FONT FACE="desdemona">desdemona font</FONT>

<FONT FACE="garamond">garamond font</FONT>

<FONT FACE="modern">modern font</FONT>

<FONT FACE="symbol">symbol font</FONT>
(These are pretty silly.)

<FONT FACE="wingdings">wingdings font</FONT>
(As are these.)


Good luck with others...



One More Font Change Tip

     You can now set numerous text font faces for the computer to play with. Here's what I mean:


<FONT FACE="modern, arial, veranda">">Text Text</FONT>

     Notice that I have three font faces listed each with a comma in between. Following that format, you suggest numerous font faces in descending order of importance. When the page loads, the browser check to see if the computer has the first font face listed. If the font face is on the computer, it displays. If not, the browser attempts to find the second font face listed. If it's not there either, then the third comes into play. I've seen pages that list up to ten font faces.

     That way...you're sure to get at least one unless you list ten really goofy font faces.

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
Thanks for your registration, follow us on our social networks to keep up-to-date