FireFontFamily Extension for Firebug

FireFontFamily Firebug addon highlighting the rendered font in Firebug


Highlights which font-family Firefox used from the font-family property. Another product of late-night experiments in font discovery. I think I like having this exposed in Firebug rather than in a separate addon like Context Font.

8 thoughts on “FireFontFamily Extension for Firebug

  1. Yes! That is the small yet so much helpful functionality I have waited for so long. I would really like to see your add-on functionality going mainstream into Firebug.

    Did you ever thought about striking out all unused font-family in the property instead of graying out? This could keep the visual clue in line with the unused CSS property clue as you show it in your example below the “body *” CSS rule.

    1. Yeah, I thought about that, you have a great point about consistency there. I think I didn’t do strikethrough because you couldn’t tell which font would have been chosen in completely overridden rules (that are struck-through themselves), but that’s such an edge case, anyways, updated my post with your suggestion, thanks!

      1. From the typographer’s point of view strike through is surely almost the worst offense one can do to the reader. But here we do not talk about typography for mass text but about a (great!) developer aid, so strike through should be used consistently according to what the reader/developer would expect.

        As for your border rule: the strike-through is so prominent and consistent that it should never care about “what if” but only about “what really is”. However, you could sneak in the edge case by making the what-if font-family bold, yet still stricken out.

  2. I like the first one a lot more. And I really want this, you’ll have my deepest appreciation and respect if you make it happen. Unfortunately, those aren’t worth much. :(

  3. I’m not sure if this is even technically possible, but you could use both for different things: the line-through should mean the same thing as it does for “line-height” there – indicate which fallback fonts weren’t used, and the fade out could be used on all the fonts not available.

  4. So I’ve decided to go with the initial grey-out UI, as the font not being available is different than being an overidden rule and I’m going to experiment with only greying out the unavailable fonts. As for integrating with Firebug, I filed this issue a few months ago:, so any progress would be there. Thanks for the input all!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s