Global Styles/Typography: Managing fonts #45271
Description
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, ormonospace) - 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
Aafont 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.
Metadata
Metadata
Assignees
Labels
Type
Projects
Status