Global Styles/Typography: Managing fonts

[jasmussen]

Fonts and font weights can be defined in theme.json in settings.typography.fontFamilies.fontFace.

See example code

{
	"fontFace": [
		{
			"fontFamily": "DM Sans",
			"fontStretch": "normal",
			"fontStyle": "normal",
			"fontWeight": "400",
			"src": [
				"file:./assets/fonts/dm-sans/DMSans-Regular.woff2"
			]
		},
		{
			"fontFamily": "DM Sans",
			"fontStretch": "normal",
			"fontStyle": "italic",
			"fontWeight": "400",
			"src": [
				"file:./assets/fonts/dm-sans/DMSans-Regular-Italic.woff2"
			]
		},
		{
			"fontFamily": "DM Sans",
			"fontStretch": "normal",
			"fontStyle": "normal",
			"fontWeight": "700",
			"src": [
				"file:./assets/fonts/dm-sans/DMSans-Bold.woff2"
			]
		},
		{
			"fontFamily": "DM Sans",
			"fontStretch": "normal",
			"fontStyle": "italic",
			"fontWeight": "700",
			"src": [
				"file:./assets/fonts/dm-sans/DMSans-Bold-Italic.woff2"
			]
		}
	],
	"fontFamily": "\"DM Sans\", sans-serif",
	"name": "DM Sans",
	"slug": "dm-sans"
},

There isn't yet a user interface for it. Here are mockups to explore how you should be able to add fonts. The main interface for managing fonts would live in Global Styles → Typography, where a plus button would let you add a font from Google Fonts:

Note importantly that before you connect to Google fonts, you have to give consent to allow that connection to happen, as shown in the mockup above. If you have feedback on the copy, please share it, the consent box can be as verbose as it needs to be.

The modal is to be considered a "Font Library" and behaves just like the image media library, in that it is a silo of fonts, both those you have uploaded manually, or added from Google. But the sidebar list of fonts shows only the subset that are active and available to choose in your font pickers (and saved to theme.json). In that vein the checkboxes for each font weight also denote which fonts are "active":

There's a separate Upload tab:

When there are no fonts installed, there should be a bigger button to open the fonts dialog:

---

This issue was updated Aug 30.

Earlier version that were inline in the sidebar

But there isn't yet a user interface for it. Here are mockups to explore how you should be able to add fonts. The main interface for managing fonts would live in Global Styles → Typography, where a plus button would let you add a font from Google Fonts:

Uploading fonts would be available from the same interface, featuring a dropzone also serving as an upload button:

This same interface would also allow you to select or unselect font-weights used:

The above three mockups would round out the main tasks for additing and managing fonts and their weights.

Separate explorations could include an upgraded font picker for selecting fonts featuring a visual preview:

Here's also an early draft at how to manage variable width fonts:

There are a number of open questions still to be explored around how variable width fonts are best leveraged, and the files themselves allow for many interesting effects, including animated transitions. For now, this mockup simply treats it as a source of virtually infinite font weights that can be leveraged.

Initial proposal

Let's surface an interface both for picking font sets (a primary font for headings and a secondary font for body text), as well as for managing the set properties. It could live in Global Styles → Typography:

• The active font set is shown with a dark border
• Choosing "Default" in font picker dropdowns would leverage either the primary (headings) or the secondary (body + other text) fonts of the active set.

You'd be able to manage font weights:

• To edit a set, click "Edit" then choose the set
• Click the plus next to existing chosen font weights and pick in a modal

If you are starting from scratch and have no defined font weights, only a plus to add a new font is shown:

• System font is an option from the dropdown, in addition to a few other basic webfonts (such as sans-serif, serif, or monospace)
• When web fonts are used with no attached font file, no weight picker is present, showing instead "Default weights"

You can use just a single font as both primary and secondary:

• The Aa font preview shows the capital A in bold, denoting the primary font, and the lowercase a in regular font weight, denoting body text, and matching default browser values.

A basic interface for uploading fonts can be found in the ellipsis menu:

This upload interface assumes that font metadata such as name, style, and weight, can be extracted and applied to the font-face definition. If this is non-trivial, we can surface separate input fields for these values:

A library for managing uploaded assets like these can be explored separately, and linked here.

[javierarce]

I think it would be possible to parse the font files to extract the name and the style (at least, I know this is true for ttf and otf, which I think we could include on that list).

If we could have that, then the upload flow could be more simple: users upload a file and then we expose the metadata on a second step (perhaps there's no need to let users customize the font details).

[javierarce]

Also, aren't font style and font weight the same thing? 🤔

[jasmussen]

users upload a file and then we expose the metadata on a second step (perhaps there's no need to let users customize the font details)

Nice, that seems ideal. If that seems feasible in implementation, probably the path to lean towards.

Also, aren't font style and font weight the same thing? 🤔

They are combined in a single "Apperance" menu in the UI, and should remain as such, but in case we aren't able to extract these properties as metadata, CSS-wise the font definition does need separate values for font-style and font-weight, to match the theme.json counterparts:

		{
			"fontFamily": "DM Sans",
			"fontStretch": "normal",
			"fontStyle": "italic",
			"fontWeight": "700",
			"src": [
				"file:./assets/fonts/dm-sans/DMSans-Bold-Italic.woff2"
			]
		}

I.e. the above would show up as a single "Bold Italic" option in the apperance menu.

All the more reason to extract metadata if we can.

[luminuu]

Wouldn't it also be a good idea to have a separate admin page or a bigger modal (like for the settings) to view/edit/upload custom fonts, like in the Create Block Theme plugin? Just like @carolinan mentioned it here: https://twitter.com/carolinapoena/status/1590207811681935362

I feel like the fonts should not be squished into the right sidebar of Gutenberg.

[jasmussen]

Yes, I think there's an opportunity to do that, potentially as part of #45346, which explores moving the Styles tab to the left. That would afford opening a fonts management screen just like there's a templates screen. It would need a little exploration, and I like to think we can start with a modal, but it makes sense.

[jasmussen]

Mockups here have been updated to reflect some of the ongoing conversations in #53884.

[jasmussen]

@mikachan Just making sure you've seen these mockups. I don't know that we need any snackbars as part of the flow at all.

[mikachan]

Thanks @jasmussen, I agree, I don't think we need any snackbars at all.

[bph]

I was unable to connect this issue to the PR (GitHub would not cooperate)

• Font Library: Frontend [Stage 1] #53884
  As far I see this is almost ready to be merged and in review.

[annezazu]

Considering how many individuals are in place for the font library for 6.5 including this specific tracking issue #55277, I'm going to remove this from the board. Let's consider closing this out too as I'm not sure how relevant it is to the work over the last 4-6 months at this stage!