Add a Google Font picker

[passiomatic]

Instead of hand picking nice fonts from Google service we could embed in Elm Designer information for all available typefaces (see attachment) and let users to pick all the fonts they need. Picked fonts will then appear in the inspector font family drop down.

UI changes

To pick more fonts we could have a "Settings" modal which includes a "Fonts" section.

Initially the modal can preset a list of top 20 used/most popular (we have some data about that in the JSON file). The user can expand one of these fonts and see its specimen, filter by category (Top 20, Sans Serif, Serif, Display, Scripts, etc.) or search for a font name. By clicking on a "Add font" button user adds the font to those available in the workspace.

Referencing document fonts

Each font is referenced by name in the serialized document (see Codecs.fontFamilyCodec) so it is easy to lookup a font (see Fonts.findFamily).

Note: the issue that can arise is that a user install a font using the picker, save a document with that font, uninstall it and later then reopen the document. This trigger a "missing font" scenario that we'll handle in a separate way.

Building the final font URL

Using the font JSON information we can easily build the final font URL and requests actual font files from Google, like we do today.

Refreshing the data

Periodically (at each release?) we can easily refresh the font list using the Google Webfont Helper public API: https://gwfh.mranftl.com/fonts

curl https://gwfh.mranftl.com/api/font > google-fonts.json

Google Fonts dump:
google-fonts.json.zip