Search code examples
cssbrowserfonts

How can I determine what font a browser is actually using to render some text?

My CSS specifies "font-family: Helvetica, Arial, sans-serif;" for the whole page. It looks like Verdana is being used instead on some parts. I would like to be able to verify this.

I've tried copying and pasting from my browser into Word, but it's not preserving the font.

Is there some way to determine which font is actually being used for a section of text?

Firebug will give me the list of fonts as above[1], but I don't see a way to determine which one of the fonts is being used.

  1. It turns out the wrong list was being used, which solved my original Verdana problem. But I'm still curious if there's a way to identify the actual rendering font.
Solution

  • The FontFinder plugin for Firefox does exactly what you want. After installing, highlight a block of text, right click and go to FontFinder -> Analyze Selection. It will tell you the actual font being used as well as a other information like font-family, spacing, color, etc.

    Note that per Wilfred Hughes' answer, Firefox now supports this natively. This article has more details.