Welcome to the OzoneAsylum FaqWiki
Frequently Asked Questions
Webdesign

What kind of fonts can or should I use in my website? Pages that link to <a href="https://ozoneasylum.com/backlink?for=4964" title="Pages that link to What kind of fonts can or should I use in my website?" rel="nofollow" >What kind of fonts can or should I use in my website?\

FONTS, THE WEB AND INSECTS INSIDE YOUR BRAIN...
by Dracusis

So, what kind of fonts can or should you use in your website(s)? Well first and foremost, fonts that you can be sure the viewer will have installed on their system! That's the golden rule of font setting for the web. Don't ever forget it!

A quick list of common fonts across different platforms are:
- Arial
- Helvetica
- Courier
- Symbol
- Verdana
- Georgia
- Comic Sans
- Webdings

Now you might be saying: "My god, those fonts sucks!" And you'd be right. But that's just the way it is so live with it. Actually there are ways to embed font's in a web page but it's so browser and platform specific it makes me sick so I'm not even going to link to it. If you really must know then you ~could~ do a google search for "Font Embedding in Webpages". But if I catch you using that horrid thing I'll slap you silly!

If a user doesn't have a font installed on their system then the browser will revert to it's default font. This can often ruin the effect of your pages so it's best to stick with common fonts and work your designs so it fits in with them.

Another good tip when it comes to specifying fonts for your website is to specify a series of them that match the look and feel your after. There are several ways to do this depending on how your setting fonts in your webpage.


The old HTML 4.0 method using the <font> tag:

<font face="Tahoma, Geneva, Verdana, Arial, Helvetica">You text Here</font>


Or if your up to speed on your XHTML spec's then you'd be wanting a CSS rule like this:

font-family:Tahoma, 'Trebuchet MS', Geneva, Verdana, Arial, Helvetica, Sans-serif


The last one in the CSS example Sans-serif, is a font family classification. It's not a font but rather the default Sans-Serif type. What this does is set the font type to the default Sans-Serif font which is specified by the users browser. This is specified at the end of the CSS rule for a couple of reasons:

- We can't be sure what Sans-Serif font the browser will use as these settings can be changed by the user.
- Some older browseres while supporting CSS don't support general font family classifications like this.
- Putting this at the end of the rule means it will only be used if the user has none of the other font's specified before it.

Also remember to put 'quotes' around any font names that contain spaces when using CSS rules otherwise the browser will think the rule ends at the space and get all ugly on you.

Possible font family classifications:
- Serif (Times New Roman)
- Sans-Serif (Helvetica and Arial)
- Monospace (Courier New)
- Cursive (Apple Chancery)
- Fantasy (Webdings)

NB: Not all of these font family classifications are supported by all browsers, nor are the example fonts given assured to be the default font for that classification.

________________
Related FAQ's:

- Fonts - This FAQ's section on fonts
- What are "Screen Fonts" or "Pixel Fonts" and how do they differ from other fonts?
- Do you know any good resources for free fonts?
- I'm looking for Sci-Fi, Horror, Movie, etc. fonts can you help?


(Added by: Dracusis on Tue 21-May-2002)

(Edited by: Emperor on Tue 21-May-2002)

(Edited by: Dracusis on Tue 21-May-2002)

(Edited by: Emperor on Sun 01-Sep-2002)

« BackwardsOnwards »

Show Forum Drop Down Menu