Using Firebug with Fonts.com Web Fonts

In a recent blog post I mentioned a handy Firefox® plug-in, the Firebug® Web development tool. It's a well-known utility for examining Web pages without have to "view source" for the whole page. In case you are new to Web development, here's a brief introduction for you.

OK, navigate to http://getfirebug.com and click on Install Firebug. Before you click, you might want to watch the "Introduction to Firebug" video. You'll find that Firebug does way more than allowing you to inspect the page's CSS and HTML.

Once you've got Firebug installed, launch Firefox and navigate to the Web page you want to explore. You can launch Firebug by clicking on the little bug icon at the bottom right or you can hit F12. The controls on the upper right side of the Firebug window allow you to minimize it, view it in its own window vs. attached to the browser window, and exit. On the top left is the Bug Icon Menu which provides access to many Firebug options and features. The Inspect Button is next to the Bug Icon, and it brings up the Inspector. When you click on it and select a field, you'll see something like this:

Not only can you inspect the CSS but you can also see what the computed values are for the selectors – in this case h2's font-family is 'Farfel W01 Felt Tip'. Cruise around your page and you'll be comfortable using the Inspector in no time. BTW, you can also simply right-click a selection and 'Inspect Element' is one of the menu items. It will bring up the Inspector without having to launch Firebug first.