New Font Picker: Curate editor supported fonts list to a manageable list

[o-fernandez]

Feature Description

Currently, the Stories editor has too many fonts (1k?) and it's difficult to find good looking fonts amongst them all. Propose curating the list of fonts to a more manageable size (around 30-50 font families). In the future, we can add font search to allow users to find fonts beyond that curated list.

Product brief

Additional Context

Other major editing tools offer ~30-100 fonts, often no more than 30-50 in the basic font sets but up too ~100 in the expanded/premium font sets.

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance Criteria

Implementation Brief

[swissspidy]

Currently, the Stories editor has too many fonts (1k?)

Exactly 1010, to be precise (if read as binary, that'd be 10 in decimal!) 😄

it's difficult to find good looking fonts amongst them all.

Once we have font previews (#309) in the dropdown that's gonna be easier.

Propose curating the list of fonts to a more manageable size (around 30-50 font families) Other major editing tools offer ~30-100 fonts, often no more than 30-50 in the basic font sets but up too ~100 in the expanded/premium font sets.

Related: #30

[o-fernandez]

Moved this to UX column, need to get curated font list from design agency. @pbakaus

[miina]

After discussing with @barklund, I've marked this issue to be a blocker for enabling the new font picker (#2418) (it wasn't before).

Apparently, there are significant performance issues due to the new font picker rendering all the 1010 fonts at the same time, see https://github.com/google/web-stories-wp/pull/2530#pullrequestreview-447542380 and https://github.com/google/web-stories-wp/pull/2530#issuecomment-658148495 Using a curated list would fix that issue.

cc @o-fernandez @bmattb -- this would also influence the scope of the current sprint since enabling the new font picker is in the current sprint (32), however, this one still needs UX Needed.

[swissspidy]

Regarding #2530 - I don't fully get why the font picker has to render all 1000 fonts at once. Certainly this could use a virtualized list to make things a bit smarter?

[pbakaus]

Regarding #2530 - I don't fully get why the font picker has to render all 1000 fonts at once. Certainly this could use a virtualized list to make things a bit smarter?

+1, I also don't understand that at all.

[miina]

I guess it happened since implementing the new font picker was divided into smaller quite specific pieces and none of these was specifically addressing that part.

We could alternatively (to having this as a blocker) create a new issue for performance (virtualized list) instead.

[pbakaus]

I guess it happened since implementing the new font picker was divided into smaller quite specific pieces and none of these was specifically addressing that part.

We could alternatively (to having this as a blocker) create a new issue for performance (virtualized list) instead.

The curated list of fonts is almost ready, however, even in the new curated list scenario, a user can still type a font into the box and get to a filter of the whole 1000 fonts. That still needs to be fast. If that requires opening another performance ticket, then yes, please do.

[samitron7]

Here is the curated list. @pbakaus Let me know if I left any out or if we need to add additional info to this ticket. I'll add the harmonic scaling values to the presets ticket - this was to determine relative sizing for headlines, titles, subtitle etc..

Karla Lato Lora Merriweather Montserrat Nunito Oswald Playfair Display Poppins Raleway Roboto Roboto Condensed Source Serif Pro Titillium Web Work Sans Alegreya Arimo EB Garamond IBM Plex Mono IBM Plex Serif Inconsolata Muli Noto Sans Noto Serif Open Sans Open Sans Condensed PT Mono PT Sans PT Serif Roboto Mono Source Sans Pro Ubuntu Anton BioRhyme Bungee Bungee Shade Cookie Dancing Script Monoton Nothing You Could Do Parisienne Rock Salt UnifrakturMaguntia

[o-fernandez]

Added list to the product spec as well, for cross reference, and moving to ready for sprint (assuming new font picker is implemented)

[bmattb]

@samitron7 to confirm how this list is ordered with the agency (priority vs alphabetical)

[bmattb]

direction - proceed with alphabetical