Fonts

[dvproductions53]

I have just created my site but the font's don't load on other peoples computers. They appear as one of the defaults, but why? Do I need to upload the font to cpanel? If so, how?

Thanks.

[essellar]

That's one of the things we always had to get used to in web development -- the fact that users probably wouldn't have the same fonts installed that we do. There are consistent ways around it these days, but it might be instructive to look at the Good Olde Days methods first, since they're still the fastest and most reliable in general.

There are only five fonts that you can absolutely rely on the user having available: serif, sans-serif, monospace, cursive, and fantasy. Those are the generic font-families in CSS, and you have no control whatsoever over what those fonts are. (You don't even get the satisfaction of knowing that a serif font will actually have serifs, since the user is generally free to set it to whatever they want.) When you tell the user's computer to use a specific font, don't give it any choice in the matter, and that font is not installed on the user's machine under the name you specified, the computer will make it's best guess at which family that font falls into (there's usually a limited substitution table in the OS somewhere) and it will use the default font specified for that family. The user can still see and use your site, but it may look very different from what you had imagined.

Step two along the road to getting what you had intended is to use one of the "web safe" fonts. There are a number of fonts that are pretty much universally installed, and which can be used with a high degree of reliability across machines. Among them are: Arial (with Helvetica as a fall-back), Verdana and Trebuchet MS in the sans-serif family; Georgia and Times New Roman in the serif family; and Courier in the monospace family. The truly safe fonts are a pretty restrictive list, but you can build an effective and well-designed website using them.

You can also use a font list in your specification. For instance, if you design your site using Helvetica, a CSS statement like this will give you a best-case degradation:

body {
font-family: helvetica, "Helvetica LT Std", "helvetica neue", arial, sans-serif;
}

The Helvetica font may be installed on a Mac as "Helvetica" or on a Windows machine as "Helvetica LT Std" (Helvetica Linotype Standard); a very close substitute is "Helvetica Neue", which has the same basic lettershapes and font metrics with a few minor changes, and Arial is a reasonable rip-off with a little less elegance. If none of those are installed, then fall back to the generic sans-serif. You'd use the same technique -- a list of fonts, separated by commas, in descending order of preference -- to get a "close enough" approximation of your design for any font choice you make. For the truly rare fonts or fancy titling, you'd use an image.

Finally, we come to the modern approach, which is to use @font-face declarations in CSS. All of the current browsers can use @font-face (MSIE has included it since at least version 5.5). That will allow you to upload the font as a resource (or, rather, a set of resources) to your website that the user's browser can download as needed. Note that you can't do this with just any font for free -- some of them require a paid license to use as @font-face resources. There are free solutions for this -- take a look at Google's font directory. You can also create your own @font-face kit using an online service such as Font Squirrel's @font-face Kit Generator. (The info about where to install the fonts, etc., is included in the site and the generated kit.) That will allow you to use just about any font you want, but the results can be variable (smoothing and font metrics tend not to be so good with a lot of fonts used this way).

I hope this answer has been of some help.

[dvproductions53]

Thanks so much for the help, I appreciate it. I will have to use one of the basic fonts instead which isn't much of a problem, just that I would have preferred to use a more related font.