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

user_109391 0
Viewed 81965

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.
fonts browser css
10 Answers

You could try checking that specific section with Firebug for Firefox. It should give you all the exact properties.

jeroen_421390

There is no need to use any external browser plugins for that. In order to check which font is really used on the website in Google Chrome, you need to:

  • open developer tools (right click on a website and select inspect)
  • select desired object within "elements" tab
  • select "computed" tab, in the bottom pane you would see "rendered fonts":

enter image description here

user_19050730

You could try using Find Website Used Fonts to identify the different typefaces used on a website or web page.It's a free chrome extension that also lets you preview a typed in text of your own in the different font-styles identified from a webpage. Super convenient and easy to use, it's also free so that's a major plus. Hope this helps

user_158595780
Related