Move font family definitions into respective typography presets.

[jffng]

What?

This PR moves the font family definitions to their respective typography preset files.

Needs WordPress/gutenberg#65019 to be merged to work as expected.

How?

• Each style variation or typeset file defines the font families used in that variation/typeset.
• Main theme.json only includes 2 font families used in the default styles (Manrope and Fira Code).

Why?

Fixes: #233

[jasmussen]

Hey @jffng, we're nearing beta 1. Is this something that has to happen before that date?

[jffng]

Is this something that has to happen before that date?

I don't think so, since the related Gutenberg issue is considered a bug.

[github-actions]

Preview changes

You can preview these changes by following the link below:

• Preview changes for twentytwentyfive

I will update this comment with the latest preview links as you push more changes to this PR.

Note

The preview sites are created using WordPress Playground. You can add content, edit settings, and test the themes as you would on a real site, but please note that changes are not saved between sessions.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: jffng <jffng@git.wordpress.org>
Co-authored-by: matiasbenedetto <mmaattiiaass@git.wordpress.org>
Co-authored-by: juanfra <juanfra@git.wordpress.org>
Co-authored-by: carolinan <poena@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: beafialho <beafialho@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[matiasbenedetto]

I updated this branch incorporating the latest changes made on trunk. I moved all font family definitions that are not used in the default styles out of the main theme.json file and included them on each variation/typeset file.

[matiasbenedetto]

This screencast compares the behavior of

Left	Right
WP 6.6 + Gutenberg with WordPress/gutenberg#65019 and TT5 with this PR (#237)	WP 6.7 Beta2

Both screens should look the same in terms of typography. The video shows that the fonts are loading correctly when defined in a style variations and typesets (#237) when WordPress/gutenberg#65019 is in place.

Screencast.from.09-10-24.18.22.50.webm

[matiasbenedetto]

I merged the latest changes from trunk branch and resolved the conflicts.
Now WordPress/wordpress-develop#7581 has been merged into core, and WordPress/gutenberg#59965 has been closed; I'm removing the blocked tag.

I think the PR is in good shape for review.

[juanfra]

Thank you. I've tested this saving each style variation / typography present and viewing in the front end, and it's working well. Code also looks good.

Screen.Recording.2024-10-22.at.12.33.03.mov

[juanfra]

I've just rebased after we got this PR merged, where we introduced variable fonts. There were some conflicts in theme.json and I updated the font family definitions in the typography presets to use the variable fonts.

@matiasbenedetto @carolinan @beafialho I'd appreciate it if you could look at this and confirm everything is working as expected. It is working as expected on my end. Thanks 🙌

[carolinan]

To me this is a design decision, since it will change where the font families are available to be selected.

[beafialho]

I'm not sure if my testing is showing the right things, but here's what I noticed:

• When I select Afternoon, Midnight and Sunrise combined variations, I don't see the typography variations selected, like it happens with the others:

variation-sunrise.mp4

variation-midnight.mp4

• I am also noticing that the Afternoon combined variation and its respective typography set (which should look the same) don't look the same:

variation.mp4

[carolinan]

@beafialho I had not even noticed that when you select the combined variations (theme style variations) the color palette and typography preset gets a visible outline. I did not know that was a thing.

You are describing that when some variations are selected, the matching color palette and typography presets are not selected, and I can reproduce that even without this PR. So there might be a problem that is unrelated to the changes in this PR.

[beafialho]

@beafialho I had not even noticed that when you select the combined variations (theme style variations) the color palette and typography preset gets a visible outline. I did not know that was a thing.

I had not checked with proper eyes either @carolinan, but as I tested them now, I expected that to be the behaviour.

So there might be a problem that is unrelated to the changes in this PR.

I also suspected that, but I also wasn't sure if it might be just this PR, since it was created way before the changes in #564 which improved the typography variations.

[carolinan]

This is what I meant when I tried to describe that I consider this a design decision.
Before, without this PR; the font options on all variations contain these fonts:

After, the font options in each variation is different.
Afternoon:

I am not trying to say that the "before" is better (it might be overwhelming), just highlighting the difference.
Only loading the required font files should be a performance improvement.

[matiasbenedetto]

This is what I meant when I tried to describe that I consider this a design decision.

Yes, I think it's the proper design decision. From my perspective, rendering all the fonts from all the style variations and letting the user select them for page elements doesn't make sense. The variations are meant to be alternative styles that could be replaced but not combined. A design with nine different font families is difficult to harmonize, and I don't think it is the idea we would like to implement.

[beafialho]

Thank you for clarifying @carolinan!

As a designer, I have a preference for seeing all the font families displayed, regardless of the variation I'm using, for convenience but also logic of seeing all the fonts shipped with the theme in one list. However, I do see how displaying that list in the sidebar below the presets can be overwhelming and even lead to unwanted, less than ideal page/element specific settings. Since it is possible and easy to add Google Fonts and even upload them, which gives users the option of adding whatever font they want, I think this PR makes sense to be merged.

[juanfra]

Thank you all! I'm merging this one.