Amp-wp: Font selection

[ThierryA]

AC: User can choose a font for text in the Text block.
AC: Font preview is reflected in the font selection list.

• [x] Extend current font selection with Google Fonts
• [x] Add font preview in the list

[swissspidy]

Retrieving a list of available fonts from Google Fonts requires an API key. Maybe we should just include a list of the most popular ones? The whole directory contains over 900 fonts, which is too much anyway.

[ThierryA]

Good question! I suggest we grab the 15 top fonts from this list, at least for the Beta version.

[amedina]

Good idea ==> +1

[swissspidy]

Is anyone aware of a React component (either in Gutenberg or third-party) we could use to preview fonts directly in the dropdown?

[westonruter]

I think it would be preferable to use SVG images of the font names in their respective font faces. This would avoid the need to load all of the fonts when most will never be used.

[swissspidy]

I don't think <select> supports SVG inside <option>, so we'd need a custom component there anyway.

Loading time is definitely a valid concern. Right now in #1885 I just enqueue all styles, which obviously isn't the best solution. Ideally, we'd store a list of all the different fonts used in the story to only enqueue the styles that are really necessary.

[westonruter]

Yes, a custom select component that allows images for dropdown options.

[swissspidy]

I found https://danmarshall.github.io/google-font-to-svg-path/ that could be used to generate SVGs for all the fonts.

When a font is selected for the first time, we can load the font stylesheet in the background. There might be FOUT while the font is being loaded, but given that most fonts probably won't be used anyway, this makes sense.

On the front end we can then check for all the unique data-font-family attributes and only enqueue the fonts necessary.

[westonruter]

I think this can be closed now, yes?

[csossi]

verified in QA