HTML and Fonts

Since the introduction of Cascading Style Sheets (CSS) there is no longer any reason for trying to specify fonts directly in your HTML. There are several reasons for this.

The first reason is that you do not know how people are accessing your page. If someone is listening to the page being read to them then fonts are completely irrelevant in any case.

Secondly you don't know what fonts they have available on their computer. Web pages do not easily allow fonts to be embedded in the web page and so the fonts on your visitor's computer will be used to display it. When you use CSS you have the opportunity to provide a list of fonts with the first font in the list that they actually have being the one used to do the display. That gives you a greater control of how people see your page than if you only specify a single font.

So given that the font definitions go in the CSS rather than the HTML, how do we actually attach the fonts to the content of our page? Well that depends on how much of the page you want in a given font. The easiest way to apply the main lists of fonts to your headings and content is to attach the fonts to the appropriate tags in the CSS for example:

h1, h2, h3 {font-family: arial, helvetica, sans-serif;}
p {font-family: georgia, serif;}

Where you want to be more specific about applying the font to a smaller section of your content there are several options you can use. Where the purpose of the different font is to apply emphasis to a part of the content the em or strong tag is a possible candidate for defining the font. Where the font is to be applied to just a few words where there is no appropriate tag describing the purpose, enclosing the content within a span tag and applying the font using a class is perhaps the most appropriate way.

There are a number of different ways to apply fonts using CSS. The only way that is definitely wrong when it comes to applying fonts is to hard code them in the HTML rather than placing them in a separate CSS file.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow