In this installment of the Dreamweaver CS5 CSS Starter Page series, we'll add the last finishing touch to the design. We'll use @font-face to add a custom font that expresses the rugged terrain of Alaska and the Yukon.
The CSS property @font-face offers true font support. After linking to a custom font within your style sheet and uploading the font file to your site (just as you would for an image), you can then use it on your pages without users having to have the font on their own systems. There is a catch, however, and that is the variability of browser support. Fonts have to be converted to a number of different formats in order to work in Safari, Firefox, IE, Opera, Chrome, the iPhone, and the iPad. These formats then have to be written in a somewhat complex syntax in the style sheet.
Fortunately, there is a free service called Font Squirrel that offers hundreds of fonts that are licensed for use on the web, and that are already converted to the formats you'll need for them to work in all major browsers. In this tutorial we'll use this service to add the font Gesso to the Yukon layout.
The CS5 CSS Starter Page Series:The CS5 CSS Starter Page Series - Part 1: The YukonThe CS5 CSS Starter Page Series - Part 2: Marking up the PageThe CS5 CSS Starter Page Series - Part 3: Structuring with CSSThe CS5 CSS Starter Page Series - Part 4: Refining Details with CSS
The CS5 CSS Starter Page Series - Part 5: Adding Navigation Systems
The CS5 CSS Starter Page Series - Part 6: Converting to Horizontal Navigation
The CS5 CSS Starter Page Series - Part 7: Adding CSS3 Pods
The CS5 CSS Starter Page Series - Part 8: Adding a Custom Font...
