Creatio Theme does not accept custom fonts

[sbathompson-he]

Quick summary

The Creatio theme does not allow users to use custom fonts. When a user changes the font from default, certain blocks break and cannot be recovered unless a page refresh is done. I tested this on a test site and found the same issue, so it must be tied to the theme.
I also noticed, that when the Global Style font is changed, it does not change the already affected blocks. The font remains.

Steps to reproduce

1. Select Creatio as the sites theme
2. In Global Styles, or in any block, change the font to something else. I tried Libre, and a couple others
3. The blocks will break and cannot be edited on the homepage

What you expected to happen

Shouldn't break and should remain editable

What actually happened

Screen.Recording.2024-08-22.at.12.50.35.PM.mov

Impact

Most (> 50%)

Available workarounds?

Yes, difficult to implement

If the above answer is "Yes...", outline the workaround.

Create new blocks and paste in the content using the default font

Platform (Simple and/or Atomic)

No response

Logs or notes

No response

[mrfoxtalbot]

Thank you for reporting this @sbathompson-he.

I was unable to replicate it following these steps:

1. Set a custom font
2. Try to edit existing paragraphs and headings in a page

Are you still able to replicate this?
Can you confirm this is indeed Creatio? The video looks somewhat different.
Could you please share a link to the site in question? I'd like to take a direct look.

Thank you!

[Copons]

I can reproduce the issue, but only on the reported site.
The site does use the Creatio theme, however I don't think it's a Creatio issue.

Rather, it seems to be a Jetpack Google Fonts issue or directly related to how we handle fonts on Dotcom.

The error is triggered by this line from Gutenberg, which expects the fontFamilyFaces variable as an array.

All my own test sites return an array like this:

[
  {
    fontFamily: "Cormorant",
    fontStyle: "normal",
    fontWeight: "300",
    src: "https://fonts.wp.com/s/cormorant/v21/H4c2BXOCl9bbnla_nHIA47NMUjsNbCVrFk9TQ7Fg7A2uwYs.woff2",
  },
  // ...
]

On the reported site, however, the variable is an object (and in a very different format):

{
  "libre-baskerville-100-900-italic": {
    fontDisplay: "fallback",
    fontFamily: "Libre Baskerville",
    fontStyle: "italic",
    fontWeight: "100 900",
    origin: "gutenberg_wp_fonts_api",
    provider: "jetpack-google-fonts",
  },
  // ...
}

I'm not familiar with how we handle external fonts, and I know it's a very complex affair.
I'll ping @arthur791004, who might direct us to the right people. 🙂