Daily web design tips

Thursday, February 09, 2006

Web design font families

Font families are collections of fonts that define how the text is displayed on your web site, if the first font isn’t available the second would be used, and so on.

Fonts are sometimes unavailable because the computer displaying the web page doesn’t have that particular font installed. If the computer doesn’t have the font it can’t use it to display text, and will use the default, Times New Roman, which in many cases is undesirable. Therefore font families came to be.

So basically you are saying right computer use this font for text on the web page, but if you don’t have it, use this second one, and if you don’t have that use this third one.

Setting Font Families

To set the font family for the whole page you will need to view the HTML [Define] of the web page and insert the following code between the <head> and the </head> tags [Define], which will be at the top of the web page.

<style type="text/css">
<!--
body {
font-family: Arial, Helvetica, sans-serif;
}
-->
</style>


This code makes all the text on a web page be displayed in Arial, if Arial is unavailable then use Helvetica and as a last resort use san-serif.

Change Arial, Helvetica, sans-serif to which fonts you want to be displayed, but make sure you use web safe fonts.

Not working correctly?

If text is being displayed in a different font than you specified check that there isn’t a <font> tag around that text by checking the HTML of the page. You will need to remove all of these font tags if you have them to make the above code work correctly.

If you don’t have font tags in your page, check the text isn’t an image, if the text is within an image you will have to edit that image separately.

0 Comments:

Post a Comment

<< Home