Web-stories-wp: 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