Consider adding a system/web safe font as an alternative to default fonts

[LittleBigThing]

Currently, the theme is only using web (Google) fonts and it loads three font files if the theme’s default style is used (400kb!?).

Most other default themes have been using system fonts. IMHO, a default theme should provide a lightweight, less opinionated alternative for users who want to avoid the additional ‘weight’ for their sites. This might have been (kind of/maybe?) possible using the Font Library, but this will not make it into 6.4.

It would be a nice and easy solution to at least make a system (or a web safe) font available in the typography options. This is simply achieved by registering it in theme.json. It could be a modern font stack as well, as was suggested in #175, which provides a nice alternative font stack that looks very similar in each operating system (not like system fonts).

[luminuu]

Can I get some Design feedback on this @beafialho @richtabor?

[MaggieCabrera]

TT4 is not the first default theme to add external fonts to the theme. TT3 was a good example of how to build a lean block theme that looked good without adding much to it and was a nice base for users to build on top of. TT2 did add fonts to the theme files. I think both approaches are okay, and they both show different ways of building themes. They also serve a purpose in how they teach others to replicate the same behavior if they want to add fonts to their themes.

Unless there's a design reason to change the fonts at this stage in development, I don't see a technical reason to make that change so close to RC.

[LittleBigThing]

Thanks @MaggieCabrera.

I agree with you about default themes being an example for new WP features and best practices.

I also think that they are examples of giving users freedom of creating. I did not suggest to change the design in this phase of the process, but to simply make a system font available (see PR #573) to give users the freedom of using a ‘weightless’ font if they wish.

I, for example, often use default themes to build lightweight websites. I appreciate having the freedom of not to have to use a Google font for such a site.

I realise that making fonts available is probably the (future) purpose of the Font Library. So that might be a better place to advocate having system/web safe fonts available as alternatives.

[MaggieCabrera]

Ok, I misunderstood, and thought we were talking about replacing one of the existing fonts. I think that should be fine, let me comment on that PR

[LittleBigThing]

With regard to the comments in the PRs:

Totally agree concerning the confusing name of the fonts. System font and/or System Serif would be much better.

I am not sure either if adding additional (system) fonts or font stacks is theme territory.
On the other hand, it is kind of easy to do this now using theme.json without any bloat, and it gives users options.

As @richtabor mentioned somewhere, it might be a better idea to create a style variation?

[luminuu]

I'd avoid adding more style variations and rather just add a sans-serif and serif system font to the main theme.json. Otherwise it is not easily understandable why there are basically two similar style variations in colors, when the only difference is in the fonts, which should be rather minor.

[MaggieCabrera]

I think what we need to decide here is if we want to surface fonts to the user that are not being used by the current style active on the theme or not.

[luminuu]

The user only sees the fonts that are either declared in theme.json or declared in the style variation, and if the latter is the case, they only see the declared fonts from the style variation. So we'd have to add the system fonts to all json files where fonts are registered.

In an ideal world the system fonts would be provided by the editor/font library, but this is not planned for the first iteration: WordPress/gutenberg#54186

[LittleBigThing]

In an ideal world the system fonts would be provided by the editor/font library, but this is not planned for the first iteration: WordPress/gutenberg#54186

Indeed. It seems kind of plugin territory right now. (So I tried to enable adding all the ‘modern font stacks’ with this plugin.)

Although I think the theme should give the option for system fonts, adding them feels a bit like doing what the font library needs to and will do (soon hopefully :-)).

[luminuu]

Since the font library got punted to 6.5, we won't see it in this release. If everyone is fine with adding a sans-serif and serif default font stack to the theme.json and all style variations with own font delcarations, we can go ahead and do this.

[kafleg]

@luminuu

Do you mean to add system font like this?

{
"fontFamily": "-apple-system,BlinkMacSystemFont,\"Inter\",sans-serif",
"name": "System Font",
"slug": "system-font"
}