Font Library: Include a "Select All" option when activating/deactivating fonts

[beafialho]

What problem does this address?

It's quite time consuming and burdensome to have to select each font weight when I want to add or remove an entire font family. I suggest we add a "Select All" tick at the top, like this example:

Currently:

[jasmussen]

Good followup to #45271 which actually already includes a table heading and a similar toggle that selects all. Here it is in an updated version with the toggle on the left:

[jasmussen]

CC: @mikachan @matiasbenedetto for aweareness.

[annezazu]

Noting that this is mentioned here too: #56688

[creativecoder]

Note that there's a sister issue for this related to installing fonts: #58011

[jasmussen]

For any performance issues related to selecting multiple variants, do we already have an issue for smartly loading only the font-weights used on a particular page, or do we still need to create such an issue?

[creativecoder]

For any performance issues related to selecting multiple variants...

@jasmussen Good question! A @font-face definition in CSS is created for each installed font variant on every page. However, modern browsers will only load the font file specified in @font-face if it's actually used in css rules for content on the page.

So selecting all the variants of a font doesn't cause a performance problem by itself--it's one extra line of html added to the page for each variant. The performance issue comes if all the variants are available, and the styles settings on a page call for loading all of them (e.g. you've picked lots of similar but different weights in the styles settings for blocks that load on the page).

[jasmussen]

I responded here, thanks for clarifying!