Font Library

[matiasbenedetto]

⚠️ this is a work-in-progress draft.

What?

This PR implements font management capabilities into the Gutenberg editor.

Screencast: Activate, de-activate and install fonts:

2023-05-24.14-43-40.mp4

Screencast: Persisting fonts installed across themes:

2023-05-24.15-15-23.mp4

Screencast: Uploading local font assets:

2023-05-29.16-54-46.mp4

Why?

Refer to #45271

How?

By the implementation of a Font Library.

What is the font library?

The Font Library consists of a font manager for WordPress. The Font Library is available globally, independently of the theme activated, similar to the Media Library. This list of installed fonts and their assets are site-wide available and the users can select the fonts activated (available in the editor) for each theme.

Using the Font Library the users can:

• Install fonts
  • Install Google fonts
  • Install local fonts
• Uninstall fonts
• Activate/deactivate fonts

In this PR we implement the font installation from Google fonts and local fonts, but I think this implementation will make it easy to create third-party plugins that offer a list of fonts from which users can pick and install the ones they want to use.

How it works:

• Install fonts: add the font family definition to the installed fonts. list and download the font face assets to /wp-content/fonts).
  • Install Google fonts: add the font families definition to the list and downloads the Google fonts assets to /wp-content/fonts. The assets from Google are called just at the time of previewing fonts in the font library. After the fonts is installed no other request to Google or other third-party servers will be made because the font assets are hosted locally in the /wp-content/fonts folder.
  • Install local fonts The font assets are uploaded from the users devices to the wp-content/fonts folder and the font definitions are added to the list of installed fonts.
• Activate/deactivate fonts: add/remove font-family definitions from the font families list defined in Global Styles/Settings. The active fonts are the fonts that will be available to use in the editor. As we are using the Global Styles data the users are able to activate/deactivate fonts for each theme.
• Uninstall fonts: remove the font family definition from the list of installed fonts and delete the assets from /wp-content/fonts folder. Only the non-active fonts from the user-installed fonts can be uninstalled. Theme fonts will be able to be deactivated but not uninstalled.

Known issues:

• Dynamically load font in the editor iframe: When users activate a recently installed font in the editor the font is not loaded on the iframe editor because it does not reload on global styles font families change. We need to fix this to preview the font on the editor just right after the font is activated without the need of reloading the page.
• Removing font activated in another theme: If users remove and user-added font not active on the current theme but active in another theme the assets will be removed but the font definitions will persist. We should define the expected behavior around this.
• More visual hints: we would need to add more visual hints for example to notify a font was successfully installed.

How the data is persisted?

1. User-installed fonts: the list of installed fonts is saved in a custom post type, wp_fonts_library, in the database, similar to how Global Styles. That is an addition to this PR. It is motivated by the necessity of having a list of fonts that is independent of the theme activated and currently, we don't have that ability.

2. Theme installed fonts: the list of theme fonts comes from the theme origin of the Global Styles/Settings.

3. Active fonts list: From the previous 2 sources the user can add font definitions to a third list persisted in the Global Styles custom origin. This is the list of active fonts for each theme. If this list is not defined in Global Styles, all the theme fonts are active.

How to test

Use the feature as features in the screencast.
All the feedback about the design, behavior, and data-persistence of the feature is welcome!

About the code implementation

I consider that is not ready and it doesn't worth making a code review yet because the implementation is sketched to test if this work is on a good path. Currently, we are implementing just the happy path, there is not much error checking, no security checks, not performance optimization and no tests.

Previous explorations around this:

#46332
#50102

[hellofromtonya]

Heads Up: The new Font Face was merged into trunk today.

Rebasing this PR on top of trunk will bring in the Font Face and disable the Fonts API. Then further testing can happen within the scope of the Fonts Library.

What is Font Face? See #45271 (comment)

[matiasbenedetto]

We are splitting the font library in several PRs to merge it progressively:
The backend code for the font library is available for review in this PR #52704

[github-actions]

⚠️ Type of PR label error

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

• Type-related labels to choose from: [Type] Accessibility (a11y), [Type] Automated Testing, [Type] Breaking Change, [Type] Bug, [Type] Build Tooling, [Type] Code Quality, [Type] Copy, [Type] Developer Documentation, [Type] Enhancement, [Type] Experimental, [Type] Feature, [Type] New API, [Type] Task, [Type] Performance, [Type] Project Management, [Type] Regression, [Type] Security, [Type] WP Core Ticket.
• Labels found: [Feature] Typography.

You can learn more about the Type labels in Gutenberg here

[paaljoachim]

Hey @matiasbenedetto

Really nice work!

Just a quick comment after seeing the first video.

An example.
I install a lot of fonts and variations of them. After trying them out I find 2 fonts I want to keep and the rest I just want to delete. From the first video it looks like we can deselect but not delete a font. There can now be a huge list of fonts that are deselected and still seen in that specific screen.

It would be helpful to select - deselect as well as delete a font when one knows it will not be used.

[matiasbenedetto]

It would be helpful to select - deselect as well as delete a font when one knows it will not be used.

Hi @paaljoachim, yes! I think it does not appear on the screencast, but currently, there is a "uninstall" button available for the font families with no font faces activated. When clicked, It will remove the font definition and the font assets.

[paaljoachim]

Great! Thank you @matiasbenedetto Matias!

[azaozz]

A question: Is there a specific reason for the Font Library to use a third-party proprietary CDN for fonts sources? Asking because use of Google Fonts was one of the reason the initial "Webfonts API" was not committed to WordPress two years ago. Then there was a GDPR related court case about usage of Google Fonts where, as far as I remember, that usage was deemed inappropriate/breaking the GDPR. There seem to be other sources for the same fonts.

Seems use of the Google Fonts CDN in WP should be discouraged, and core should not force any website to it. What is the chance to remove use of the huge (1.3MB) list of available Google fonts and replace it with a list to the same fonts hosted elsewhere? As far as I see there are several places that host the same open source fonts, even as NPM packages (would that be a preferable format?).

[tomxygen]

@azaozz I have the same doubts regarding Google Fonts and GDPR compliance.
Why not creating something like Openverse but for fonts?
Or why not integrating open source fonts in Openverse?

[tomxygen]

there is a "uninstall" button available for the font families with no font faces activated

@matiasbenedetto I think that, for font families with active font faces, the button should be displayed anyway, but grayed out and with a hint saying that it is is not possible to delete that font because it is currently active somewhere(?).

[matiasbenedetto]

@matiasbenedetto I think that, for font families with active font faces, the button should be displayed anyway, but grayed out and with a hint saying that it is is not possible to delete that font because it is currently active somewhere(?).

Hi @tomxygen, Yes! Good suggestion.
This was implemented in the latest frontend PR around Font Library:

I'm closing this PR because it was just a prototype.
The project is being tracked here: #54169