How to Display Sample Fonts on a Web Page

Both website developers and font designers often need to know how to display sample fonts on a web page. In the case of web design, web designers sometimes like to display fonts that the user can select from a menu list. In the case of an artist that creates and sells fonts, there's often a need to display unique and non-standard fonts in a catalog where buyers can purchase those fonts.

Free Helvetica Font

When it comes to displaying fonts on a web page, there are a number of limitations that make it difficult to use fonts that aren't considered "web safe." Web safe means that the fonts display well across multiple operating systems. Due to new web technologies and creative programming techniques, there are a number of options available to display some unique sample fonts on your web page. The techniques covered in this article include:

• Replacing text with images
• Replacing text with flash text
• Embedding fonts

One of the simplest methods of displaying non-standard fonts on your website is by converting letters to images. On some sites, such as a catalog for a font artist, a single image that displays an overview of all letters using the font will suffice. You can create such an image by using screenshot tools or by saving the image from your graphic editing software. The Fontcraft website offers an excellent example of using this approach.

Another way to display font through graphics is by converting individual letters within the font into letters. There are a number of free applications available that will do this for you. One of those is the Font Bitmapper from CyberPhaze Productions. The software produces a grid, or matrix, of bitmaps that include all characters of your font. The utility also automatically handles the correct spacing and alignment between characters that you typically have to do manually using a normal graphics editor. Once the bitmaps are created, you can generate larger graphics, demo images, or even web counters by putting the individual bitmap characters together. Since the final product is uploaded and displayed on your website as an image, none of the problems associated with using non-web safe fonts apply.

For many years, web developers have been trying to get around the problems associated with the lack of commonality between the various operating systems and supported fonts. CSS brought the ability to define fonts for entire pages or even single elements of a page, but it still depends upon the premise that the user's browser will at least support one of the defined fonts. Using graphical solutions solves those compatibility problems, since every browser can display a GIF or JPG file. However, it also creates problems with page load times because using images can dramatically increase the size of your page.

In 2003, programmer Mike Davidson invented a technology that he termed "sIFR," which stands for "Scalable Inman Flash Replacement," that cleverly incorporates Flash technology and Javascript in an approach that allows web designers to display any sample font on their web page. The technique takes HTML text and dynamically converts it to Flash text using CSS code and javascript that performs the replacement routine when the page is loaded. Once the page is fully loaded, the web page text displays with the font you've defined whether or not the user has that font installed on their computer. This technique is a combination of using images, using CSS and incorporating embedded fonts. The end result is that you can display any font you want with greater page loading efficiency than the image approach. The only drawback is that the user's browser must be both Flash and javascript enabled.

Another approach to displaying sample fonts on your web page is to code your website so that the fonts are already loaded, or "embedded" along with the page. While this sounds simple enough, it's actually a fairly complex technique that only the more professional designers sometimes try. The origin of this technology really started with Bitstream's release of "TrueDoc," which is an open source solution that stores character shapes in special compressed files called Portable Font Resource (PFR). This approach requires:

• Javascript code in the header of the web page (based on the font that you "record")
• Calling the font in the usual manner triggers the code and when the page is loaded, the recorded font is "played"

The one significant drawback to the Bitstream approach is that some users may need to install the Font Player plug-in, however many browsers already have it included.

One thing that learning how to display sample fonts on a web page reveals is that font coding and technology on the Internet leaves much to be desired. Web designers continue to struggle with the drawbacks of every available solution, looking for the lesser evil. Some designers give in and stick with web safe fonts, while other designers bend over backwards to develop an approach that allows them to utilize any font they wish.

• 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

• Adding Flash to Websites
• Category:Web Design Tips and Tutorials
• Shelley Allegro Free Fonts
• Main Page
• Web Safe Fonts