1613927 - DevTools Fonts panel does not react to dynamically applied font faces

Status: NEW

(DevTools :: Inspector, enhancement, P3)

Description

[Tom Adler]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:72.0) Gecko/20100101 Firefox/72.0

Steps to reproduce:

1. Opened https://www.kijijiautos.ca/
2. Opened Developer Tools -> Inspector -> Fonts
3. Reloaded the page
4. Opened Fonts -> All Fonts on page
5. Copied the URI of the first font

Actual results:

The shown and copied URI was https://www.kijijiautos.ca/static/fonts/LarsseitRegular-kern-5b5db003.woff2

After pasting "½" anywhere on the page the URI is updated with the correct value. Correct value is also shown if the developer tools are open after the page load.

Expected results:

The URI should have been https://www.kijijiautos.ca/static/fonts/LarsseitRegular-hint-all-1bd7b3f0.woff2

Comment 1

[Tom Adler]

The page in question uses "2 stage font loading" as described on https://www.zachleat.com/web/css-tricks-web-fonts/

Comment 2

[Razvan Caliman [:rcaliman]]

Indeed, the Fonts panel does not react to dynamically loaded resources, like font files / font faces.

Until this is addressed, the workaround is to click any node in the Elements panel, then copy the font face URL from the All Fonts section. The node selection makes the Fonts panel do a fresh query for matching fonts which will catch any recently loaded fonts.