- Published:March 12th, 2012
- Comments:8 Comments
- Category:Firebug, Firebug Tip, Planet Mozilla
If you are a web designer or if you are at least dealing with fonts time to time, this neat feature should come in handy.
The feature is implemented by FireFontFamily, which is a Firebug extension created by Heather Arthur (also a member of the devtools team). So, you need to install it first if you are interested.
Update: this feature is integrated with Firebug 1.10
Simple feature description:
Highlights the rendered font-family from the list of font-families for a CSS 'font' or 'font-family' property in Firebug's CSS panel.
See all Firebug tips
And couple of explanatory screenshots. The first one shows the Style side panel when FireFontFamily extension is not installed.
The other one shows the same when FireFontFamily is installed.
See that highlighted font, it's the one actually rendered.
8 Comments
[...] Go here to read the rest: Software is hard | Firebug Tip: What font-family is rendered? [...]
Why hasn't this functionality ever been added into the default Firebug extension itself?
@pd: The extension exists for a while and I personally didn't have that idea before.
There is bunch of Firebug extensions (50+) and instead of incorporating them into Firebug source base, we want to rather provide packages with preinstalled extensions (e.g. for a developer, a designer, performance analyser, etc.)
We call the idea Firebug Swarms: http://getfirebug.com/releases/swarms/Firefox-10.0/
Unfortunately, not fully ready yet.
Honza
@honza: I wasn't suggesting all 50 get rolled in, just this one though others might also be candidates. I don't think this falls into a designer or developer swarm for example. At my workplace both myself and the graphic designer need to be able to verify which font has been implemented. That's me, a developer, and her, a designer. Genre-fication and categorization is always a bit vulnerable like that. I guess what I would like to suggest is that more small (I presume) extensions like this, which will be of benefit to many users across different user groups, be consider for incorporation into the main extension. I mean really unless that happens more so than it does now, Firebug is playing into the hands of the native dev tools argument by not installing enough by default and then forcing users to go and install another extension, then another ... until soon the likes of the MemShrink crowd consider ordinary developers as being outside the bell curve of 'normal' users because we install too many extensions. This already is the case for me, the good Mr Nethercote has said as much.
On another tangent, I guess the question really should be: why doesn't Firefox itself "compute" font family down to the actual font being rendered rather than just showing the string it is applying to the given selector/element? Most other "computed" properties are finite aren't they?
Food for thought.
Keep up the great work. Long Live The 'bug!
This, however, is not the end of the story — at least, not on Linux, where GTK2/Pango may display a glyph from some other "similar" font, maybe even some font not listed in the CSS font-family rule, if the "desired" font has no glyph for the character to be displayed.
[...] Software is hard | Firebug Tip: What font-family is rendered? [...]
@pd: See http://code.google.com/p/fbug/issues/detail?id=2495
And it was actually Heather herself posting that feature request (which I didn't realize until now).
To the question why Firefox doesn't compute the actually used font: The spec (http://www.w3.org/TR/css3-fonts/#font-family-prop) says "Computed value: as specified".
@Tony: If that's like so, then it's OS related and not related to the browser or an CSS spec.
[...] Firebug Tip: What font-family is rendered? Litet firebug-plugin för att se vilket typsnitt som faktiskt rendreras (via @henrikekelof). [...]