Adding Custom Fonts to a Web Page

Adding custom fonts to a web page is one method that web designers can use to set their sites apart from the millions of others on the web. When used correctly, the CSS method of embedding fonts can quickly and easily improve both the look and the usability of a web page.

One of the objections to adding custom fonts to a web page is that it is easy to go overboard and use wild and esoteric fonts that seem pleasing to a designer's eye, but become unreadable to the bulk of the visitors to the site. There's a reason for the standard font choices of "Arial, Helvetica, Sans Serif" or "Times, New Roman, Serif" that are usually used. Those have proven to be the most readable for most web content, and serious thought should be given to straying from them.

At the same time, using the old-school method of creating logos and background images using an image application like Adobe Photoshop, and creating a GIF font image is both time-consuming and bandwidth-consuming. It is not at all elegant and terribly inefficient, which are bad words to web designers who cherish the art of writing good code.

The compromise is a method using CSS that puts web fonts into a page, and then configures the size, color, kerning, and other font properties using style sheets. The method of doing this is well-documented in many tutorials on the web such as the one at A List Apart, which advocates the practice as a great way to increase visual variety on the web. However, not everyone is as excited about it.

Aside from the worry about increasing the number of "websites that suck," there is a very legitimate worry about the illegal use of copyrighted fonts. The process of embedding fonts requires several steps, including the fact that the entire font needs to be downloaded to the visitor's machine. They most likely have not paid the licensing fees to make use of that font, and so this is a significant problem for the fontographers who spend a lot of their time and effort creating their readable art forms.

Another argument against this practice is the potential for viruses and other malware to piggyback on the downloaded fonts. For a time Microsoft's Internet Explorer suffered this weakness, and while the vulnerability was quickly patched, the potential remains for further problems.

The last reason not to add custom fonts is simply that it doesn't always work. While the method used in the A List Apart tutorial is "standards compliant" – that is, following the guidelines of the World Wide Web Consortium – not all browsers are standards compliant. Between the pressures of trying to fix current bugs as well as developing new features, web browser development teams usually do not have custom web fonts as the highest priority on their to-do lists.

The way to avoid the copyright issue is relatively simple: don't use copyrighted fonts. Free fonts of many kinds are readily available from a number of sources, such as Chank and award-winning fontographer Ray Larabie's site. These are free for anyone, so if they end up on your viewer's machine, there's no problem.

If your web page is likely to be viewed by users on many different browsers, there is not a surefire way to make sure that the embedded font technique will work correctly. The best you can hope for is that CSS and Javascript will "degrade gracefully," and your site will still be readable. One of the hidden advantages of using this practice is that it gives you even more keywords for web browsers to pick up on, whether the web page displays as intended or not.

If, however, you have a designer who insists that their work of art must be seen exactly the way they intend, the best method is to put an announcement prominently somewhere on the site letting people know what kind of browser the site is best viewed on (usually something like Opera). This way you can be sure that all the CSS and HTML will render perfectly, and your site will be both beautiful and functional..

• How Do I Enable Javascript on my Computer
• Really Cool HTML Codes
• Worst Traffic Rankings
• Design A Web Page Quiz
• Cursive Handwriting Font

• Free Helvetica Font
• Free Fonts Helvetica Truetype
• Free Forum Hosting Without Ads
• Download a Free Copy of Dreamweaver
• Animated Falling Snow GIFS

• HTML Source for a Guestbook
• Truetype Helvetica Download for Free
• Free Serpentine Bold Fonts
• Web Page Newsletter Templates
• Main Page