Downloading and Using Vista Web Fonts

In the 90's Microsoft donated the standard Web Core Fonts that most every browser uses today and those core fonts have remained unchanged until now. With the release of Windows Vista, Microsoft has unleashed something quite new on the Web -- the "C" fonts; Cambria, Calibri, Candara, Consolas, Constantia, and Corbel. Here's how to download them for free and how to use them in your web sites.

Vista includes 6 new web fonts (all begin with C as in core). All of these fonts have been expertly tuned to look great both on the screen (even LCDs) and on paper.

Here's their names and what they look like.

In addition to the above fonts, Vista also ships with Nyala and Segoe however these fonts are not a part of the free download and are unavailable, legally, to non-Vista/Office owners.

Non-vista, Windows users can get the new fonts, legally, by downloading and installing Microsoft's Powerpoint Viewer. Installing the viewer installs the new Vista C fonts on your system, and they are, for the most part, worth the download. If you're a web designer and not using Vista then this download is mandatory since it will let you see your page as your Vista users see it.

The new C fonts aren't necessarily designed to stand on their own, but rather to replace existing web-fonts, giving them a much needed face-lift. This is actually a good thing. A unique font couldn't really be used for fear that non-vista users wouldn't be able to render the page correctly. Similar fonts that look better and smoother, meant to be used in place of a traditional font, are just cheap and easy eye-candy. For instance, Calibri can be used in place of Arial and your stylesheets would specify the fonts like this…

<style type="text/css">
  .someClass     { font-family: Calibri, Arial }
</style>

When trying to implement this class, the browser will first try to use the Calibri font and if that is not available it will use the Arial font and if Arial is not available for some reason it will use the default font. That's all you have to do to give your users a vista experience. Just specify the desired vista font first then the fall-back traditional fonts. It really is that simple.

Here's a revised list of the core web fonts with the new windows vista fonts showing some suggested uses in replacing the core fonts.

One of the very best examples on this list is the Constantia, Palatino Linotype / Book Antiqua, Palatino line since it includes unique names for vista, windows XP, windows 95/98, and Apple. To set up this style you'd use this in your style sheet…

<style type="text/css">
  .someClass     { font-family: Constantia, "Palatino Linotype", "Book Antiqua", Palatino; }
</style>

This style will safely ensure that each operating system gets the font you are looking for. Vista users will see the new Constantia font, XP users without the vista fonts will see "Palatino Linotype", Windows 95/98 users will see "Book Aniqua", and Apple users will see "Palatino" -- all very, very similar fonts.

The second part of this article is a .pdf file so people without the installed fonts can see how the new fonts fit into the next generation of web-design. fonts.pdf (685k -- expect a delay.)

Sources used to create this article:

• Add Windows Vista Fonts To Your StyleSheets
• New Vista Fonts And The Web
• Cleartype Fonts