Highlight the font which has been chosen by the system

RESOLVED DUPLICATE of bug 994559

Status

()

Firefox
Developer Tools: Inspector
RESOLVED DUPLICATE of bug 994559
8 months ago
8 months ago

People

(Reporter: karlcow, Unassigned)

Tracking

55 Branch
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment)

(Reporter)

Description

8 months ago
Created attachment 8878266 [details]
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).
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.
Status: NEW → RESOLVED
Last Resolved: 8 months ago
Resolution: --- → DUPLICATE
Duplicate of bug: 994559
You need to log in before you can comment on or make changes to this bug.