fonts.com blog

Using Firebug with Fonts.com Web Fonts

by Ed Platz

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:

Using the Inspector of Firebug

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.

2 Responses to “Using Firebug with Fonts.com Web Fonts”

  1. Aaron Stanush says:

    If you don’t already have Firebug installed, here is a lightweight bookmarklet that will expose web fonts simply by hovering over the text.

    http://chengyinliu.com/whatfont.html

  2. Ed Platz Ed Platz says:

    Thanks Aaron! Very cool indeed. There is also FontFinder — it tells you the element details AND the font (and scads more)! No matter what tools you use, the best part of all this is the attention that fonts are getting! :)
    https://addons.mozilla.org/en-us/firefox/addon/font-finder/