18

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!

Dharman
  • 30,962
  • 25
  • 85
  • 135
xuemind
  • 405
  • 3
  • 11
  • 2
    Possible duplicate of [How can I determine what font a browser is actually using to render some text?](https://stackoverflow.com/questions/884177/how-can-i-determine-what-font-a-browser-is-actually-using-to-render-some-text) – Arjan Oct 10 '19 at 08:11

3 Answers3

28

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

Pradeepal Sudeshana
  • 908
  • 2
  • 14
  • 30
  • 1
    Yes, it is! So fantastic feature in Firefox. But Vikas Patel gave another suggestion in previous answer. Is it possible to accept 2 answers? – xuemind Mar 16 '19 at 17:00
  • 1
    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. – Subatomic Tripod Jul 27 '20 at 17:41
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.

Marcel
  • 1,279
  • 10
  • 12
  • 1
    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? – xuemind Mar 16 '19 at 16:35
2

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! enter image description here

Dmitriy
  • 3,305
  • 7
  • 44
  • 55
Vikas Patel
  • 207
  • 1
  • 10