Post editor title/heading font does not match rendered font

[huzaifahj]

Issue Summary

If the font for post titles/headings when rendered finally to the user is a serif font, then the editor should allow editing the post using a serif font.

Marked as a bug because this discrepancy causes frustration and breaks the seamlessness in the UX of writing posts. The font should match the current theme's exact font.

Steps to Reproduce

1. Change site font to serif
2. Visit post editor

Ghost Version

Latest

Node.js Version

18

How did you install Ghost?

Self hosted

Database type

MySQL 8

Browser & OS version

No response

Relevant log / error output

No response

Code of Conduct

• I agree to be friendly and polite to people in this repository

[huzaifahj]

Issue changed as I've noticed the content font does match, but the title/heading fonts do not.

Extra CSS is needed for the dashboard, inserted using a Chrome extension:

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');

.gh-editor-title {
	font-family: "EB Garamond"!important;
	font-weight: 550!important;
}

[kevinansfield]

The editor experience is intentionally completely separate to the theme. This is true for all aspects of the editor, from the title to the body content and each card. The admin area is meant for content management, not for site design, and so it has a consistent UX no matter what changes you've made in the theme or elsewhere.

Themes have complete control over how content will look with infinite ways to achieve different results, there's no way the editor could read how a theme is displaying in any reliable way. Having themes control the editor experience would also open a lot of avenues for the editor experience to be completely broken which is a much more serious breakdown of a seamless editing experience.

If you want to see how the content you're working on will look within your theme it's necessary to use the preview function.