I have always been crazy about typefaces and it's one of the things that attracts me to page design and graphic illustration. Fonts come in so many variaties and variations, it's hard to remember which is which. Historically publishers of fonts and typefaces would print catalogues of sample text in various fonts so you could see what all the characters in each font looked like. This was a simple and relatively striaght-forward way to find a typeface you were looking for, or to browse for a font to use in your latest project.

A year or two back I came up with an idea to make a HTML page that displayed a number of my fonts with some sample text by using the style attribute for a paragraph to change the font-family to the font I wanted to preview. I was able to select the font I wanted from the few I slected when it occured to me that .NET supports accessing all the fonts installed on the system. It was a very quick and simple idea that allows the user to create a "Reference Sheet" of all typefaces installed on their local system.

Font Reference Sheet Preview

Now when I'm looking for inspiration for a new logo, or looking for just the right typeface to make that new website's design hang together perfectly, I have one page I can scroll through to see everything I have available. I really like just loading the page in a browser and paging through it. You can copy the text from the page and it will retain the font information, so you can paste it into Word or other editors which recognize the text's typeface info.

While I have cleaned up this version before I release it to the world, this little utility is pretty "low-tech" and not too friendly. I provide a reasonable set of defaults so the resulting Font Reference Sheet would include text to show a reasonable representation for a typical font. It's styled neatly with alternating white and light grey background to distinguish one font from the next. The name of each font is displayed in a plain Arial text so you can read the names for strange or symbol fonts.

The tool allows the user to select where to save and what to name the reference page. It allows the user to slect the text and background colors that the page will use to display the fonts, allowing the user to see the fonts used with different combinations of foreground and background colors. The user can also choose to alternate the sample text color or the background color or both.

Snapshot of the Font Reference Sheet  tool

The user can change the entire page template or the font template so that they can include their own font sample text or change the page styles or layout. Color or font name values can be inserted by using special text, for the font template:

[--font-family--] The family of the current font
[--color--] The current font text color
[--background-color--] The current font backgound color

Or for the page template:

[--body--] Where to inject the font templates once processed
[--background-color--] Always the first font background color

Now this only works because the markup is specifically targeting the font faces it knows you have installed. Unless this page is viewed on a computer with all the same fonts installed, it won't render with the correct fonts. The purpose of this page is to provide the local user with text samples in fonts installed locally and viewed locally. This won't work if you server this page up via a web server, for example. Providing an end user with a custom font isn't something that is commonly supported yet.

I've included the source code to the this tool, and while I hope it is useful I do not gaurantee it's usfulness or suitability for any specify application and by downloading the source code, the user agree to this stipulation.

Download the project Visual Studio 2008 code here: http://www.gwsii.com/blog/fontref/fontreferencepage.zip