Add and configure fonts for use in Pendant.

[pbking]

Changes proposed in this Pull Request:

Add necessary font files to /assets/fonts
Add entries for fonts in theme.json
Configure headings and body element attributes in theme.json
Ensure user-selectable font sizes are appropriate
Review for mobile/desktop size scaling

Note that most of this task doesn't seem to be do-able in the FSE. Management of fonts is expected to be possible with 3rd party plugins or perhaps JetPack.

Details:

In order to achieve the design the typefaces Jost-Light and Literata-ExtraLight have been used.

The original design notes a size difference between desktop/mobile for header font sizes. This is achieved with clamp() values.

The original design notes that the typeface for Heading 4 (and presumeably 5) change from Literata to Jost from Desktop to Mobile. This isn't possible with current tooling without CSS. I've split the difference and made H5 and H6 uppercase Jost. Please let me know if this is acceptable.

Related issue(s):

Fixes: #5676

Screenshots:

Headings (desktop):

Headings (mobile):

Body (desktop):

Body (mobile):

Used for evaluation:

<!-- wp:heading {"level":1} -->
<h1>Heading 1 <strong>Bold</strong> <em>Italic</em> <strong><em>BoldItalic</em></strong></h1>
<!-- /wp:heading -->

<!-- wp:heading -->
<h2>Heading 2 <strong>Bold</strong> <em>Italic</em> <strong><em>BoldItalic</em></strong></h2>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3>Heading 3 <strong>Bold</strong> <em>Italic</em> <strong><em>BoldItalic</em></strong></h3>
<!-- /wp:heading -->

<!-- wp:heading {"level":4} -->
<h4>Heading 4 <strong>Bold</strong> <em>Italic</em> <strong><em>BoldItalic</em></strong></h4>
<!-- /wp:heading -->

<!-- wp:heading {"level":5} -->
<h5>Heading 5 <strong>Bold</strong> <em>Italic</em> <strong><em>BoldItalic</em></strong></h5>
<!-- /wp:heading -->

<!-- wp:heading {"level":6} -->
<h6>Heading 6 <strong>Bold</strong> <em>Italic</em> <strong><em>BoldItalic</em></strong></h6>
<!-- /wp:heading -->

<!-- wp:separator {"className":"is-style-default"} -->
<hr class="wp-block-separator is-style-default"/>
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p>LoLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size">This is a small paragraph with <strong>bold</strong>, <em>italic</em> and <strong><em>bolditalic</em></strong>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"fontSize":"medium"} -->
<p class="has-medium-font-size">This is a medium paragraph (the default size) with <strong>bold</strong>, <em>italic</em> and <strong><em>bolditalic</em></strong>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"fontSize":"large"} -->
<p class="has-large-font-size">This is a large paragraph with <strong>bold</strong>, <em>italic</em> and <strong><em>bolditalic</em></strong>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"fontSize":"x-large"} -->
<p class="has-x-large-font-size">This is an Extra Large paragraph with <strong>bold</strong>, <em>italic</em> and <strong><em>bolditalic</em></strong>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

[beafialho]

Thanks @pbking! A few comments:

• The bigger headings font should be Literata 72pt Light instead of Literata Extra Light. There is a noticeable difference between these two font variants characters.
• The smaller headings should use Jost Medium with letter-spacing: 0.1em

The original design notes that the typeface for Heading 4 (and presumeably 5) change from Literata to Jost from Desktop to Mobile. This isn't possible with current tooling without CSS. I've split the difference and made H5 and H6 uppercase Jost. Please let me know if this is acceptable.

I think this can work fine, but wanted to know which size did you set for H5?

[pbking]

@beafialho I have changed all of the Literata to Light instead of Extra Light. Literata is a pretty large typeface (~230k/per) so if that works for all sizes that would be a win. That said the Italics typeface is pretty different and that seems more worth the cost. I've added that. Let me know what you think.

I don't have a 72pt variety in what I downloaded. 60pt is what I found available and have been using. If you have another resource I should use instead LMK.

I've adjusted the smaller headings to use Jost Medium and adjusted the letter spacing. The sizes for H5: clamp(15px, 2vw, 20px) and for H6: clamp(12px, 2vw, 15px)

I've updated the screenshots.

This is ready for another look.

[beafialho]

Thanks @pbking. Awhile back when I downloaded the font from Google Fonts, it came with the 72pt version. It must have removed in the meantime, but we can use this one instead.

At the moment I'm still seeing H6 without the letter spacing, can you double check? The one above is the default, and below is the correct letter spacing.

Regarding the mobile heading sizes, let's use the sizes below. I updated the Figma styles.

[pbking]

At the moment I'm still seeing H6 without the letter spacing, can you double check? The one above is the default, and below is the correct letter spacing.

Yup, I absolutely skipped H6's letter spacing. Corrected.

Regarding the mobile heading sizes, so let's use the sizes below.

Values tweaked to match.

And thank you for providing the 72pt version. I dropped that in.

Screenshots updated. @beafialho it's ready for another review.

[pbking]

One more change:

In order to get the header's title correct I needed the '-Black' font. When added the headers now look like this:

Is that ok?

[beafialho]

Thank you, I think these are all looking accurate 👍

[beafialho]

In order to get the header's title correct I needed the '-Black' font. When added the headers now look like this:

Oh sorry @pbking, I hadn't seen this! We can use the Bold weight instead, I prefer to change the title than the headings.

Also, the Bold Italics in your screenshot don't seem to match the font. Here's how the headings should look with the Bold one:

[pbking]

Thank you for catching the Italics. There was a typo with the resources being loaded. Switched to -Bold instead of -Black:

Better?

[beafialho]

Yes, thanks!