Preview fonts

[bjorn3]

When choosing a font there is currently no way to see if it looks nice other than selecting it which is slow. There are three ways I can think of to preview fonts. The first one is to show the font name in the font itself. The second one is to show the a sample next to the font name and the third one is to temporarily chance the font of the text when hovering over a font and reverting back if you click away from the font selection dropdown.

[Keavon]

To make this feasible, we'll have to minimize the network usage as much as possible. We should modify the FontInput widget so it isn't just a DropdownInput and it uses virtual scrolling (replacing the offscreen DOM nodes with a spacer) and only loading the fonts from Google Fonts when they are on-screen.

It would also be nice to let users sort by category, availability of weights, and more filtering options. Allowing them to see the font's name in the font, or type in some sample text to see that instead, is what I had in mind. I also like the idea of hovering over an entry to see it previewed in the editor.

[0HyperCube]

We can optimise the volume of data by only loading a font with the specific characters for the preview alongside @Keavon's suggestion. https://developers.google.com/fonts/docs/css2#optimizing_your_font_requests