0

I'm doing some web development.

I have a component (a text) which has the following font family defined:

font-family: "Roboto", "Helvetica", "Arial", sans-serif;

How do I know which font family from these is used in my browser?

I use Mozilla currently and I open Inspector, and bot Rules and Computed tab show: font-family: "Roboto", "Helvetica", "Arial", sans-serif;

There is also Fonts tab showing this: enter image description here

croraf
  • 4,332
  • 2
  • 31
  • 50
  • https://stackoverflow.com/questions/845/detecting-which-font-was-used-in-a-web-page – Marked as Duplicate Dec 17 '17 at 11:51
  • As the question is phrased and presented currently, it appears that you have already answered your own question, as the *rules* and *computed* tabs both indicate *which font family is being used*. If you want to know *which* `font-family`, *out of the **specified range** of font-families*, is being used, consider clarifying your question to indicate this. – UncaughtTypeError Dec 17 '17 at 11:55
  • 1
    Possible duplicate of [Detecting which font was used in a web page](https://stackoverflow.com/questions/845/detecting-which-font-was-used-in-a-web-page) – Rahele Dadmand Dec 17 '17 at 11:56
  • Just to clarify guys, I think what the the poster wants is for his application to know which font was used. It's pretty easy to debug or visually know but he wants the application to detect what was used. – crimson589 Dec 17 '17 at 11:57
  • @crimson589 This appears to be the assumption. Although, the OP is the only one who should clarify this. – UncaughtTypeError Dec 17 '17 at 12:00
  • I'm looking for an answer similar to what @miguel-svq provided, but also for Firefox. – croraf Dec 17 '17 at 13:05

2 Answers2

2

In chrome, using the inspector, select the exact TAG you want to check. Select the "computed" styles tab, at the end you will find wich font of the stack have been used. For 'code' here the fontstack is Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,sans-serif and you can check that in my computer it used exactly "Consolas" (bottom-right on the image)

EDIT: Added FF screenshot. Same work in firefox, just select the specific TAG you want to check.

chrome inspector, rendered font firefox inspector, rendered font

miguel-svq
  • 2,136
  • 9
  • 11
0

try this code first:

font-family: "Helvetica", "Arial", sans-serif;

if text appearence has changed then it was Roboto else:

font-family: "Arial", sans-serif;

if changed = Helvetica
and so on..

Bakhrom Rakhmonov
  • 692
  • 6
  • 15