1456844 - "Font Not Loading, And I Don't Know Why" — Font Editor should solve this

Status: NEW

(DevTools :: Inspector, enhancement, P3)

Description

[Jen Simmons [:jensimmons]]

Here's a demo:
https://codepen.io/jensimmons/pen/WJxXwL?editors=1100#0

This is a classic example of a problem developers have, that our Font Tool should help them with.

USER STORY: As a front-end developer, I have written code that should load the Mutator Sans font from the AWS CDN, and present it on the page. This is not working. And I need help figuring out why. It could be that the font file is not being delivered from the CDN (for a variety of reasons, permissions being a common one). Could be that the font file is available, but my code to load the font is wrong. Could be that the font is ready, but I have a bug in my code to use that font. Or it could be something else.

At the moment, our Font Inspector doesn't provide any information about fonts that are not successfully loading. I can see from the underlined font in my font-family declaration as displayed in the Rules pane, that the first fallback font is being used. And I can also see that from the font pane.  But the font pane has no information about the other fonts in my stack, or their success or failure — or why.

https://monosnap.com/file/8IHz2BtxejqIQTV9qc3ZGvpiuk7x8e.png

Example in "CodePen's debug mode" https://s.codepen.io/jensimmons/debug/WJxXwL

We've already talked about this feature. I'm not sure where our User Stories are being documented. Mostly, I wanted to pass along this example code demo.

Comment 1

[Jonathan Kew [:jfkthame]]

Actually, we do expose some relevant info -- but maybe not in the most useful place. If you check the Web Console, and turn on CSS messages (I think they may be filtered out by default; I remember being caught out by that when the new console first landed), there's a message that says

> downloadable font: no supported format found (font-family: "Mutator Sans" style:normal weight:400 stretch:100% src index:1) source: (end of source list)

This prompted me to look at your format-hint string, which is not being recognized. (Reason: it should be "truetype", not "ttf", according to the spec.)

Perhaps font-related messages like this need to be surfaced somewhere closer to the font inspector, though.

Comment 2

[Razvan Caliman [:rcaliman]]

Added context from the reporter of duplicate Bug 1582875:

I'd like to know what caused Firefox to select the fallback font. I can think of four possible reasons:

(a) it could point to a URL that returns a 4xx or 5xx error
(b) the response could fail to include proper CORS headers
(c) the server could take too long to respond and the @font-face declaration includes font-display: fallback
(d) the file returned could be not a font file