Font Library: Add Variant filter to Install Fonts collection

[dhruvikpatel18]

What?

Closes #73464

Adds a new "Variants" filter SelectControl to the Install Fonts tab of the Font Library modal, allowing users to narrow font collections by the number of available variants/styles (1–3, 4–9, 10+).

Why?

The existing font collection interface only supports filtering by category and search. For theme designers, typographers, and accessibility-focused creators, the number of available styles is a meaningful signal when choosing a font, a font with 10+ variants offers far more flexibility than one with a single face.

Since the variant count is already fetched and displayed on each font card, extending the filter UI to use this data is a natural next step. The ranges (1–3, 4–9, 10+) intentionally mirror the conventions used by Google Fonts, keeping the experience familiar.

Testing Instructions

1. Open the Appearance.
2. Navigate to Fonts -> Install Fonts.
3. Confirm the new Variants dropdown appears in the filter row alongside Search and Category.
4. Select 1–3 - verify only fonts with 1 to 3 defined font faces are shown.
5. Select 4–9 - verify only fonts with 4 to 9 faces are shown.
6. Select 10+ - verify only fonts with 10 or more faces are shown (e.g. Inter, Roboto).
7. Select Any - verify all fonts are shown again.
8. Combine the Styles filter with the Category filter and a search term, verify all three filters apply together correctly.
9. Change to a different font collection, verify the Styles filter resets and behaves correctly for the new collection.

Screenshots or screencast

Screen.Recording.2026-05-07.at.4.50.19.PM.mov

Use of AI Tools

Claude was used to assist with drafting the PR.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: dhruvikpatel18 <dhruvik18@git.wordpress.org>
Co-authored-by: henriqueiamarino <iamarinoh@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.