1373463 - Highlight the font which has been chosen by the system

Status: RESOLVED DUPLICATE of bug 994559

(DevTools :: Inspector, defect)

Description

[Karl Dubost💡 :karlcow]

Attachment: opera-safari-firefox

There is a missing feature for fonts (? or I have not found it)

Go to https://codepen.io/webcompat/pen/JJbpEY
Inspect the paragraph

Look at the CSS Rules or the computed section. You will get the list of fonts for this element, but it is not said which one has been rendered by the browser.

My screenshot shows the devtools from left to right 
from Blink (Opera), WebKit (Safari) and Gecko (Firefox)

Notice how the Rendered font is only visible in Blink.
That said, I don't think Blink has a good UI either.

What I would like is that the font which is rendered is being highlighted in both the Rules view and the Computed view. (bold, underline, boxed. Choose your sensible UI for the interface).

Why is it useful? Sometimes when trying to find out if a rendering issue is happening on the site, it's very hard to know which fonts is being used, specifically when you have sequences such as "Helvetica Neue", Helvetica. (if you are not a font expert obviously).

Comment 1

[Patrick Brosset <:pbro>]

I agree on the usefulness, and I had filed bug 994559 about this already.
In the meantime, you can also use the fonts panel which will give you exactly which font is being used now.