Search code examples
csswebfontsfont-family

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

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!

Solution

  • In , Inspector > Fonts tab displays "Fonts used" by the currently inspected element. Edit fonts MDN

    In , 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 :-

    enter image description here enter image description here

    Chrome :-

    enter image description here

    Thanks, @xuemind for suggested edit