Typography has long been treated as the red-headed circus monkey of web design. The truth is, typography is just as important to the success or failure of the design of a website as it is to print, motion graphics or any other media. Unfortunately, until fairly recently, it was either difficult, time consuming or both to display anything than Arial or Times New Roman on your website. Sure, there was sIFR, but it was often slow loading and required Flash. Also, due in part to the horsepower required for display, it really wasn’t meant for body copy, but rather for just headers and logos. A few other alternatives followed, such as FLIR and Cufon. FLIR differed from sIFR in that it embedded images, not Flash, to display the chosen font. However, FLIR was ultimately even less accessible than sIFR. Cufon is different than both of the previous methods in that it converts the font paths to vector graphics. Cufon is still used, but primarily just for navigation and headers.
Perhaps the most widely used technique for getting great looking fonts on your website is the use of @font-face. Though it was defined in the CSS2 spec, it didn’t really take off until CSS3. Basically, it allows a font to be stored on the web server and simply referenced in the stylesheet for the page:
@font-face { font-family: ‘DroidSansRegular’; src: url(‘DroidSans-webfont.eot’); }
@font-face { font-family: ‘DroidSansBold’; src: url(‘DroidSans-Bold-webfont.eot’); }
Then, simply call it using font-family:
h3 { font-family: ‘DroidSansRegular’; }
Unlike sIFR or FLIR, @font-face doesn’t require a third-party plugin and, depending on the complexity of the font, is very fast to load. If there is a downside to @font-face, it would be that there are some hiccups in getting it to play nice with Internet Explorer. Not surprising, really, since IE has pretty much always sucked. That being said, @font-face is very easy to get up and running on your website. If you are a WordPress user, there is a fantastic plugin from Google, which lets you not only select from hundreds of free typefaces, but also makes displaying these typefaces on your website as simple as selecting a font from a drop down, then clicking the checkbox next to the element you want to affect (p, H1, H2, blockquote, etc). You can also add custom CSS to apply a selected typeface to elements within a DIV. Let’s take a look at a simple setup of the Google Fonts plugin on a WordPress-powered site.
Install and configure the plugin
You can download the plugin to your machine from the WordPress Plugin Directory. Or, you can simply log into the Dashboard of your website, click Plugins, Add New and enter ‘Google Fonts’ in the search box. Clicking on Google Fonts in the list will open a window where you can install the plugin.
Using the plugin is as simple as selecting the font you want to use from the dropdown, then ticking the check box next to the element you would like to use the selected font. You may also apply custom CSS rules to individual elements. For example, I use multiple fonts on my site and wanted to have my logo display in its own font. To make this happen, I simply added the following CSS into the Custom CSS text box on the plugin configuration screen, allowing me to apply a custom font to an individual DIV:
#site-title a { font-family: ‘Gravitas One’, arial, sans-serif; }
As you can see, whether you are using WordPress to power your website or not, adding custom typefaces is a fairly simple affair and can add a tremendous amount of impact and character to the overall design.
RESOURCES
