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.

[jorgefilipecosta]

Adding to the issue that if someone buys a business plan just because the user read somewhere that business plans users can upload fonts. The user still cannot find anything related to the font library, which remains completely hidden.
This issue arises because the user must first navigate to the hosting section to activate the business plan or install a theme/plugin. This creates a frustrating experience; users may wonder why they paid for the plan yet still cannot access the regular WordPress font manager. As a result, they might reach out to support, as seen in the case of 8750088-zen, or they may even consider requesting a refund.

I think we should show the core font manager on all plans so dotcom offers the same familiar UI as core and people following core tutorials can still perform the same actions. On non-premium plans, the core upload section is replaced with a message saying something like "Upgrade to the business plan and be free to upload any font you want besides the ones we already offer". The additional upgrade path can be a small revenue opportunity.

On business plans that are not yet activated (e.g: still on the multi-site) ideally, we would offer the upload and automatically activate them as it happens with plugin and theme uploads, given that this automatic activation is more challenging, in the short term we could say something "You are already on the business plan and are able to use any font you want just activate the hosting features that you already paid for at". linking to the hosting features activation page.
On business plans that are already activated (not on the multi-site), we show the normal core UI with the ability to upload.

[github-actions]

Support References

This comment is automatically generated. Please do not edit it.

• -zen