Learn HTML : Fonts

We have already looked at some of the main ways we format out text when using html, but like most things , we always want to change the overall style or font of the text that we write. This article tells us everything we need to know about fonts and how to impliment them in our html documents.

So lets take are standard html content and make a file called fonts. 


 Fonts
 
  What do some of the fonts look like? 

We have seen , in most cases , that when we use tags we have to have an open and close tag. The font tag is no different in that respect so we need

 .... 

as well as these open and close tags we will need to add attributes to the tags. Attributes are special code words used inside an HTML tag to control exactly what the tag does. When adding attributes to our tags we follow this structure.

[NameOfAttribute]=”[ValueOfAttribute]”

Where:

NameOfAttribute : is the identifier of the attribute to be used eg size

ValueOfAttribute : is the actual valued to be used eg “#333399”. These values should always be enclosed in quotes. Double style quotes are most common although single style quotes are allowed. Some atrtibutes will work without them but quotes should be used at all times (508 compliance means we always need quotes and Dimensions requires them also.)

 So what attributes can we have when using our Font Tags.

Font Size: To change the size of the font we use the size attribute. The size attribute takes the following format.

……

Example Ranges

 ……
……
……
……
……
……
……

Font Color: To change the color of the text  we use the color attribute. The color attribute takes the following format.

Text now appears in a different color

The valid values for the font color are the hex values of color.  Here is an online tool that will help you pick your colors. click hear to get started.

Font Face: To change the style of the text  we use the face attribute. The face attribute takes the following format.

This text has a Georgia font

For the font face, use the name of the font type as the value such as Arial, Tahoma, Georgia. I have not been able to find a good web page for the list of allthe font faces that our out there, but if you have please let us know by adding a comment. We will keep looking, and when we find something we will let you know.

In the above exmaples we have just added 1 attribute at a time, but you should know that you can have more that one attribute in the font tag at any one time , for example

All 3 options

And there you have it , you now know how to change your font style in your HTML documents.

4 thoughts on “Learn HTML : Fonts”

  1. Hello!

    Isn’t it considered best practice to use CSS to achieve this these days?

    i.e. <span style=”font-size: 12px; color: #00ff00; font-family: arial”>All 3 options</font>

    Or actually, better still

    <span class=”all3″>All 3 options</span>

    And then in the CSS file:

    .all3 {
    font-family: arial;
    font-size: 12px;
    color: #00ff00
    }

    The idea being that you can then just change everything in one place rather than having to do it to loads and loads of font tags.

    http://www.w3schools.com/tags/tag_FONT.asp

    Cheers!

    Jason

  2. Thanks for the comment & Keep them coming..

    While I agree with you that this syntax is outdated … it is still used today , and if I am not mistaken it is used by the Desktop Author product. CSS will be covered in later articles but first we need to help the real newbie’s get across the basics of html so that when they see this type of syntax they understand it.

  3. Oh god – Desktop Author uses font tags?

    It’s strange though, because if you use question.style.color or whatever, it renders it as inline styles.

    It’s just weird because mrInt is supposedly XHTML only, but font tags aren’t in the XHTML spec!

    Cheers,

    Jason

Leave a Comment

%d bloggers like this: