Dorna: Fonts in the editor do not match the live site

[jp-imagines]

Quick summary

• On at least the Dorna theme (unsure if other Blockbase children are affected), default font styles (size, weight, family) do not match between the editor and live site.

Steps to reproduce

1. Activate the Dorna theme.
2. Open the Site Editor and view the demo homepage.
3. Compare to the live homepage.

What you expected to happen

Text styles should be the same/consistent in the editor and the live site.

What actually happened

Text styles differ for blocks without custom styles set:

• Default-sized paragraph text (e.g. Dorna complements indoor spaces with its soothing hue and corn stalk-like silhouette.) is 13px in the editor vs. 1.125rem on live site.
• Default-sized H2 Heading (e.g. Get yours now) is 1.3em in the editor vs. 2rem on live site.
• Heading blocks have a default weight of 600 in the editor vs. 400 on the live site.
• Default Paragraph blocks and Button blocks use a system-default sans-serif font in the editor vs. Lora (serif) on the live site. (Based on default styles, it looks like the Lora font is actually what's expected here and the editor is displaying incorrectly.)

Browser

No response

Context

8184570-zd-a8c

Platform (Simple, Atomic, or both?)

Simple

Other notes

Replicated on a Simple test site; haven't yet tested in other contexts.

Reproducibility

Consistent

Severity

Some (< 50%)

Available workarounds?

Yes, difficult to implement

Workaround details

Reconfiguring global and block-specific styles in the Styles pane does allow you to match the editor to the live site, but it looks like there's quite a few styles involved and it's not easy for most users to determine what styles are being shown in the editor.

[github-actions[bot]]

Support References

This comment is automatically generated. Please do not edit it.

• [ ] 8184570-zen

[rickmgithub]

📌 REPRODUCTION RESULTS

• Tested on Simple – Could Not Replicate

📌 ACTIONS

Triaged

• Author feedback
• Closed as could not replicate (please reopen if the issue reoccurs)

Message to author

Thanks so much for the report. I couldn't replicate the issue with the same set up?

When I look at the editor I see the font size of 18px for "Dorna complements indoor spaces with its soothing hue and corn stalk-like silhouette" and 18px in the live site. And, "Get yours now" is 32px in both.

Are you still able to replicate it? If so could you share some screenshots or video and reopen the report.

[jp-imagines]

Looks like something changed – I can't replicate anymore. Thanks for checking @rickmgithub 🙂