Fonts, fonts and fonts – thats what you have installed on your Mac! My fonts library has over 200 different fonts and it just becomes obscuring when I try to pick one good-looking font for the web!
Fonts for the web are limited. To get to the point for those who don’t like reading, here are the reasons:
- Not every computer has your specific font
- Different browsers might not render your font
- Macs/PCs might not read your font
The biggest problem with using fonts is that not all computers have your font. If you plan to use a font that you downloaded from Dafont, then do not expect that your visitors will have that font. This will result in the browser replacing your specified font with it’s standard font. That of course will mess your site up. Shifting, ugliness, etc… – you know the outcomes!
Another problem is that each browser renders fonts differently. Firefox varies from Safari and both of them vary from Internet Explorer. Some might read your font, some might not! Safari is one of the best browsers to read all fonts. I have never had real issues using any fancy fonts with Safari – but as soon as I switch to Camino or Firefox on my mac (with the fonts installed), the fonts might render correctly. I do not know the reasons behind this – but it just sucks! Internet Explorer seems to ignore nearly all fonts except for the standard serif or sans-serif. Crazy!
Lastly, the Mac and Windows issue. I will not elaborate to much on this because it is pretty obvious that Mac and Windows things are not that compatible.
Basically it comes down to forgetting about the idea that you have found the global font for all platforms. Now people switch to options like sIFR or to just use images. Unknowingly, you kick Googles ass because it can no longer read any of the contents in your site!
So what are we to do?
To make it simple and painless: use any of the standard fonts. There is a collection of standard fonts that will render correctly in all browsers and on all platforms. The fonts aren’t the best – but someone takes what they can get!
So here is a list of them:
- Arial
- Arial Black
- Comic Sans MS – cool
- Courier New
- Georgia – cool
- Helvetica – cool
- Impact
- Times
- Times New Roman
- Trebuchet MS
- Verdana – 100% all time working
If you are a mac user, you can find these fonts in the default font browser under the tab “Web-safe” fonts:
I know, this isn’t the best solution, so what else is there?
Well what I like to do is to simply use the font that I like. I then use CSS to apply a font family and a second font for backup. So when my favorite font is not accepted by the browser, it skips to the second font. The second font is one of the fonts in the list above and looks as similar as possible to the one you wanted. Thus, those who have the font and the correct browser enjoy your design capabilities and those who do not have your font, get to enjoy one of the default fonts.
Here is an example:
element {
font-family: "cool sans-serif seeming font", sans-serif;
}
So choose your fonts correctly! Test them in all browsers and with all platforms to make sure that you know how you render.