How to know which font is used by browser from CSS font-family list?

Question

In web development, a preferred list of font is put in font-family of CSS as following sample.

font-family: Roboto, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;

I want to know which font is chose by browser to display the content. I know I can manual modify the font in font-family one by one in browser developer tool and observe the changes of displayed content to identify the font used by browser. But it's too clumsy and require very sharp eyes T_T.

Anyone can know a better way? Thanks very much!

Answer 1

In firefox-developer-tools, Inspector > Fonts tab displays "Fonts used" by the currently inspected element. Edit fonts MDN

In google-chrome-devtools, Elements > Computed tab displays "rendered fonts" for the currently inspected element. "Even if its name isn’t in the font-family list." whats-that-font , Hackernoon

Firefox :-

Chrome :-

Thanks, @xuemind for suggested edit

Answer 2

In order if available. In your example it'll go for Roboto first and keep the next ("Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif) as back-up, if it's available.

Answer 3

Hi On mozilla firefox use Font Finder addon . It is the best addon which will provide u all the styles applying on your element.!

Updated

It works as I expect. After Font Finder installed, select the target text and choose [Font Finder>Analyze Selection] in context menu (right click). It will show the Font Being Rendered as following screenshot!