Website Typography

Gone are the days when web developers could only use flash or image graphics to add fancy or intriguing fonts to websites. You can still do this is you wish using flash based font replacement techniques like sIFR but there are other alternatives available to the modern web designer.

So what alternatives are there? Well for one there's Cufon, Cufon uses the HTML5 canvas element to correctly render text. Another alternative and the easiest way to implement custom fonts is by using the CSS @font-face rule. To use @font-face you need to download the font you wish to use then include the path to your font in your css file. You will need several different versions of your font to be compatible with the different browsers. The formats you'll most likely need are TTF, EOT, WOFF and SVG. One great site for finding font's is fontsquirrel, they also have @font-face generator that can convert your fonts to the different required formats. To add your font to your style sheet you need to including the font and then use that font like so:

Including your font:

@font-face {
    font-family: 'SansationRegular';
    src: url('Sansation_Regular-webfont.eot');
    src: url('Sansation_Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('Sansation_Regular-webfont.woff') format('woff'),
         url('Sansation_Regular-webfont.ttf') format('truetype'),
         url('Sansation_Regular-webfont.svg#SansationRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

Calling your font:

#headline {
	font-family: 'SansationRegular', helvetica, sans-serif;
}
 

If you have any experience with CSS using @font-face will be a piece of cake.

Another element of web typography is of course the actually styling of the text, one fun way to style text is to use the CSS text-shadow rule. Below are a couple of examples of a custom font loaded using the @font-face rule and styled using text-shadow (as well as the normal font-size, font-weight and so on).

*Note: While text-shadow is super cool and works in all modern browsers, it still doesn't work in Internet Explorer.

Styled Custom Font 1

Styled Custom Font 2