Update example variation font styles

[mikachan]

Now that we have included the IBM Plex Mono font family, I've updated the two example style variations that use this font.

• Example 2 uses it for all text
• Example 4 uses it for all text, apart from headings and navigation links (which use DM Sans)

As part of this PR, I've also updated all the font styles in each example variation.

[beafialho]

Nice, this looks good to me. One question: all text (headings, paragraphs, navigation, footer, etc) on Example 2 should have the same font size, is that going we'll address later?

[mikachan]

Oh, I didn't notice that! That's neat. I think the simplest way to do this in code is to override all the font size presets with the same size, so I've just pushed up a change that does that.

However, this change doesn't seem to be working on my local site. I'm still seeing the variables set to the base theme sizes. Also, if I try to override specific block sizes like so:

"core/post-excerpt": {
	"typography": {
		"fontSize": "var(--wp--preset--font-size--medium)"
	}
},

This also doesn't seem to apply correctly with Example 2 activated.

Could someone else please test this out and see if you're seeing the same?

Things I've tested:

• Fluid sizes on/off
• Different themes - Pendant and Remote

[jffng]

think the simplest way to do this in code is to override all the font size presets with the same size

I can verify the presets are not being overridden when I activate Example 2, but I notice that it's still referring to the fluid typography sizes. I wonder if a fluid scale is set, it will override the presets regardless if a variation is set:

Also, if I try to override specific block sizes

This works for me but after making the change in the example2.json, I have to have to go into the style picker, select example 2, and hit Save again. 😕

Maybe two issues to raise for discussion upstream?

[mikachan]

Thanks for testing @jffng.

I tried testing with fluid sizes turned off, but I didn't go back into the style picker and re-select the variation again.

I'll search for and open any required upstream issues. Thank you!

[mikachan]

I've made several more changes to this PR to update the font styles in all the example variations.

I've also swapped the font files for DM Sans bold and bold-italic as they were the wrong way around.

(Issue for the behaviour described above: WordPress/gutenberg#43395)

[mikachan]

Do you think we could merge this and iterate if anything needs to be changed?

[beafialho]

Sorry I missed this one from a few days ago.

Do you think we could merge this and iterate if anything needs to be changed?

I think so.. I'm seeing Example 2 with the same size everywhere which is intended 👍

[mikachan]

It's ok, and thank you!

[bgardner]

(Experiencing same issue as @justintadlock in #100... waits for #81 to be merged to regain my sanity) :-)