Firefox extension to inspect fonts?

April 21, 2005 7:04 AM

Is there a Firefox extension that will let me mouseover some text on a webpage and tell me what font is being used, plus all its properties (size, line-height, padding, color, etc)?
posted by frenetic to Computers & Internet (8 answers total)

I'd suggest the Web Developer Extension. Are you knowledgeable of CSS? This extension makes it easy to access a site's CSS rules, for example. What you're talking about is usually defined using CSS.
posted by sjvilla79 at 7:19 AM on April 21, 2005

You can also select the text, then right-click on it and choose the "View Selection Source" item. That makes it easier to figure out what CSS rules you need to look at.
posted by smackfu at 7:23 AM on April 21, 2005

Seconding the Web Developer Extension. By choosing CSS -> View Style Information, and then clicking on your question, I get this information:
http://ask.metafilter.com/mefi/17785

.copy (line 40)
{
font-size: 12pt;
font-family: "verdana",sans-serif;
line-height: 130%;
margin-left-value: 50px;
margin-left-ltr-source: physical;
margin-left-rtl-source: physical;
margin-right-value: 50px;
margin-right-ltr-source: physical;
margin-right-rtl-source: physical;
padding-top: 2px;
padding-bottom: 2px;
}

Also, try the DOM Inspector that is built into Firefox. You can load up a page, open the DOM Inspector, click the icon in the upper left ("Find a node to inspect by clicking on it") and then click on the text you want to inspect. That will take you directly to the object, and then you can view it's computed style on the right side that will tell you more than you want to know.
posted by revgeorge at 7:38 AM on April 21, 2005

Response by poster: I do use the web developer toolbar and I'm not too bad with the CSS. These tips are cool (especially smackfu's, that'll come in handy) but if there's any inheritance going on, you're stuck having to trace back through the CSS to figure out what's going on.

I was kind of hoping for something more like ColorZilla.
posted by frenetic at 8:15 AM on April 21, 2005

well, unless there are multiple fonts in use on the same page, and if the developer wasn't an idiot, the font declaration should be at the top of the css file, set for the body tag.
posted by Hackworth at 1:50 PM on April 21, 2005

frenetic: the DOM Inspector shows the calculated style, which means it shows the font based on all the inherited—dare I say cascaded—styles.
posted by revgeorge at 1:57 PM on April 21, 2005

Mouseover DOM Inspector is a godsend (especially when debugging CSS), and its javascript so it'll work on any browser
posted by softlord at 11:31 AM on April 24, 2005

i have just discovered that hitting ctrl+shift+f when you have the web developer toolbar installed brings up a very nice DOM inspector that includes font info for moused-over elements.
posted by Hackworth at 11:06 PM on April 12, 2006