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!

Armin

Possible duplicate of How can I determine what font a browser is actually using to render some text? – Verdict

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

Carburize

Yes, it is! So fantastic feature in Firefox. But Vikas Patel gave another suggestion in previous answer. Is it possible to accept 2 answers? – Armin

In Firefox, the third pane of the developer tools was off the right side of the window. I resized the other two panes and found the font tab. – Kostroma

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.

Infighting

thanks for your answer. So, If I don't know what kind of font has been installed in OS, how can I know which font browser choose finally in font-family list? – Armin

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!

Dishpan