Styles: bring Core font library to better showcase custom Google fonts available on WordPress.com

[annezazu]

Context

Currently, we only show the font library if someone is on the business or commerce plan. This means if you are using Premium or, soon, Personal when we change gating global styles, you can only select specific Google fonts that have been vetted and it's not possible to get a full preview of the fonts available. Here's what that looks like:

Current experience

lack.of.font.library.on.wpcom.mov

Problems with the current experience

• Discoverability of how many fonts are available is poor and buried in settings for individual top level selections.
• No previews of installed fonts when selecting between items. This is a Core issue that shows up both with Styles > Typography and on individual block settings that would be great to have worked on: Font Picker: Refine, show font preview, and load only active fonts from library WordPress/gutenberg#51151

Specifically for WordPress.com, is there a way we can add the Font Library experience in for folks to show how many vetted fonts they are getting? This would also allow for a preview when folks browse through for now:

We'd need to ensure upload and install fonts options are turned off, as well as the ability to delete any fonts. The main goal would be allow folks to peruse the font options available. Because there are so many Google fonts available by default, we also don't want them listed outright on the Styles > Typography section as that would bury the Element controls. Instead, I imagine we could simply show FONTS with the settings icon:

We could even show a brief message emphasizing what's available with a link to this support doc https://wordpress.com/support/custom-fonts/

Here's what I hacked together with inspect element:

<p id="inspector-text-control-2__help" class="components-base-control__help fca-c--ba-eecf-1iwb6nq ej5x27r1">Easily customize your site’s typography with our selection of vetted, built-in Google Fonts, ensuring quality, readability, and style consistency across your content. <a class="components-external-link" href="https://wordpress.com/support/custom-fonts/" target="_blank" rel="external noreferrer noopener"><span class="components-external-link__contents">Learn more about custom fonts</span><span class="components-external-link__icon" aria-label="(opens in a new tab)">↗</span></a></p>

This definitely needs some design thinking :)

[annezazu]

@mikachan and @matiasbenedetto lightly flagging this for you all due to your history with the font library! Not a top priority but definitely something impactful in communicating the value of what's available.

[richtabor]

We could even show a brief message emphasizing what's available with a link to this support doc https://wordpress.com/support/custom-fonts/

I'm not following how this is supportive?

[richtabor]

Yea, we need some design thinking here. What's the ideal scenario? You have access to the fonts in library but you don't see them in the Typography panel?

I'm not confident modifying the list of available fonts is a common enough UX pattern (have we validated it is?). Just like it's not common to modify the list of fonts on our computers. It's possible, but it's likely a low percentage of users who turn off specific fonts.

Just want to make sure we get a sense of the ideal experience we want to push for.

[annezazu]

Yup @lucasmendes-design is going to help here. Please share any specifics you have in mind in the meantime to move this forward! It would be super helpful.

The ideal to me is we better surface the available fonts and then fix the linked upstream issue of seeing a preview of the fonts available when selecting between items for styling individual elements or blocks in Styles or when customizing individual blocks. Either way, it’s not obvious how many fonts are available to users on WP.com out of the box and the value being provided.

[lucasmendes-design]

Hi folks, happy to help. I can look at this more closely early next week :)

[lucasmendes-design]

Hi folks, I agree that we have too many fonts to show within the panel. However, it's also true that the majority of Google fonts are not very useful and folks ended up choosing the most common ones. So, I think we could try to find a way to give a glimpse of what we have to offer and if users want to add more, it's up to them. As Rich mentioned, I believe it's not very common to add/change the font library we have.

So, to improve discoverability, we can show some trending fonts (most used ones) as default and a button to add/explore more.

This version tries to differentiate global types (Font paring) from Google fonts.

WDYT?

[lucasmendes-design]

It's a different context but we have something similar here:

[lucasmendes-design]

Instead of the button, we could have the + icon only. It's a bit more hidden but It also follows the general system.