Font Picker: Refine, show font preview, and load only active fonts from library

[jasmussen]

Extracted from #45271.

The font picker will show fonts that are registered in theme.json. As detailed in #45271, that means fonts added to your library which are active. The font picker can look like this:

The above design is an enhancement that focuses on showing a preview of the font itself, inline in the picker. But this design should not block either the webfonts API from landing, nor the font manager. The existing picker can work fine in the same system:

[mtias]

Is this being handled as part of the Fonts UI work?

[jasmussen]

Initially that was my instinct, but in order to separate concerns I split it out. Happy to consolidate again, though?

[mtias]

It's ok to have it split as long as we don't lose track of it!

[jasmussen]

Right! @mikachan is #52698 a good tracking issue to include this one on? Or is there a better one?

[mikachan]

Yeah, I think #52698 would be a good fit for this. I think it fits into the scope of that issue and I don't think there are any other, better tracking issues 😄