Fonts on the web

/in /by

There are a few levels of things to understand regarding fonts on the web. First off, you have your regular fonts that are considered safe to use, meaning most all users computers will have these. If the user, doesn’t have the font, it will most likely be substituted for one they do have. This not so exiciting list goes as follows:
Arial
Times New Roman
Verdana
Courier New
Georgia
Comic Sans Serif
Comic Sans Serif
Trebuchet
Yawn… more about these fonts and examples can be found at http://www.theinternetdigest.net/archive/websafefonts.html

Adding Other Fonts

There are several ways to get other (read more interesting) fonts onto your pages. Here are the most common.

Fonts As Images

Likely the oldest trick of getting other fonts to appear on web pages is to create a file in an imaging program (like photoshop) write some text in it, and save it as either a JPG or GIF, and then embed the image into the HTML document. It’s not a very sexy way of getting fonts in there, and it’s not very easy to update or change. On top of that, it’s not so good for search engines either.

CSS / Stylesheets

With stylesheets you can specify what fonts go where in you HTML page and give backups in case the user doesn’t have that particular font. This is an example of fonts being applied to a series of heading tags.

h1, h2, h3 {

font-family: ‘Trebuchet MS’, ‘Lucida Grande’, Verdana, Arial, Sans-Serif;

font-weight: bold;

}

You may not show everybody your font that way, but it’s likely most people have more than just those boring fonts listed above installed on their computers, and if you choose a common one, you may be in good luck.

SiFR (Scalable Inman Flash Replacement)

Now you know why we refer to it as an acronym. Essentially, by cross breeding CSS, JavaScript and Flash some very bright programmers and designers created a method to embed fonts and made it available for free to the public. With SiFR you can apply fonts to different parts of your HTML document. The text is even editable in a text editor. This all sounds great, but there’s a few catches. One, you need to either have flash to “capture” the fonts. If you don’t have flash, there’s a remote possibility you can download the file you need somewhere on the web. That likely lands you back to using common fonts. The second issue is that you should only apply it to short pieces of text like heading tags. Applying them to body copy will cause a very slow load time, like crossing the streams in Ghost Busters. Don’t ask, just don’t do it! Alas, the third issue is that getting the text to display properly on the screen is quite a challenge. Rather than adjusting the font-size attribute (that would be far to easy), you need to size the div or box that the text is put in. If you don’t get the sizing right, the text has a tendency to scale to fit to the area you’re working with, and this will usually create some undesirable effects. Generally, if the div or box is bigger than the SiFR text, you’ll be OK. Expect some headaches figuring it out. You can get all the history, info and files for SiFR here: http://www.mikeindustries.com/blog/archive/2004/08/sifr

Final Thoughts

Maybe someday in the future, the term copyright infringement won’t be some common, fonts will fly free like the birds, and we will be able to embed them in web pages without being sued. The web will have varied and interesting typography. Maybe even the MPAA (Motion Picture Association of America) and the RIAA (Recording Industry Association of America) will be disbanded as a result of these greedy terd-monkeys trying to infringe on our privacy. If you don’t know what I mean, google MPAA, filesharing, and torrentspy and educate yourself on what’s happening. Also rent “This Movie Has Not Yet Been Rated” and learn a bunch of other horrible things these groups are imposing upon our culture.

Getting back on track… there’s still not a great way to get the fonts you want on web pages. By using SiFR for headings and CSS for the body copy, you can make a nice web page, but you don’t yet have the freedom to have a good SEO friendly web page with all the cool fonts you want – yet.