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

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.


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

enter image description here enter image description here

Chrome :-

enter image description here

Thanks, @xuemind for suggested edit