Anchor FM Theme Font Pairings

[krymson24]

Changes proposed in this Pull Request

• Dynamically add font pairings

Testing instructions

1. Checkout this branch
2. Go to http://calypso.localhost:3000/new?anchor_podcast={anchor_podcast_id}
3. Enter a podcast name
4. Click one of the available designs
5. The font pairings should include additional font pairings specific to the type of onboarding flow

Screenshots

Fixes 382-gh-Automattic/dotcom-manage

[matticbot]

Test live: https://calypso.live/?branch=add/anchorfm-font-pairings

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

App Entrypoints (~61 bytes added 📈 [gzipped])

name                 parsed_size           gzip_size
entry-gutenboarding       +130 B  (+0.0%)      +61 B  (+0.0%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[mmtr]

I think the style preview of the Raleway / Cabin pair is reversed? I was expecting "Raleway" to be bolder than "Cabin":

I see the appropriate font-weight has been set, so we are probably not loading the font from Google for that weight:

I guess we need to consider the Anchor specific font pairings in one of these places:

wp-calypso/client/landing/gutenboarding/onboarding-block/style-preview/preview.tsx

Line 23 in 0ff4ccb

const query = fontPairings.reduce( ( acc, pairing ) => {

wp-calypso/client/landing/gutenboarding/gutenboard.tsx

Line 47 in 0ff4ccb

fontPairings.forEach( ( { base, headings } ) => {

[krymson24]

I think the style preview of the Raleway / Cabin pair is reversed? I was expecting "Raleway" to be bolder than "Cabin":

I was confused about the combination as well since we have Raleway and Cabin, and then Cabin and Raleway, but it was confirmed here -- 382-gh-Automattic/dotcom-manage#issuecomment-756272357

[mreishus]

Checking the linked comment, I don't see anything about the font weight / boldness.

Should the pairings look like

• Cabin (bold) / Railway
• Railway (bold) / Cabin
  ?

That's what I'd expect, but it's appearing like:

• Cabin (bold) / Railway
• Railway / Cabin (bold)

[krymson24]

Checking the linked comment, I don't see anything about the font weight / boldness.

Should the pairings look like

• Cabin (bold) / Railway
• Railway (bold) / Cabin
  ?

That's what I'd expect, but it's appearing like:

• Cabin (bold) / Railway
• Railway / Cabin (bold)

Oooh -- I misunderstood. Yes, you're right!

[kwight]

Accidental?

[krymson24]

Hmm, I think so... VS Code UI makes it look like there's an extra space there with their annotations. Anyway, added it back and also removed the ANCHOR_FM_FLOW_ID constant as promised!

[kwight]

@ianstewart Can you confirm for us that this is what we want: both font pairings available for both Anchor themes? And keeping the total pairings at 7 (five original plus the two new ones)? I assumed regardless of how many we offer specific to Anchor, we'd keep the total at five.

[ianstewart]

@kwight that should work cc @sfougnier @ollierozdarz

[krymson24]

This is ready for review!

[kwight]

I think we're good!