What is the CSS Class associated with header fonts?

[Liefbread]

Things I have tried

Picking through various themes codes, changing editor font, changing preview font, using various plugins that allow changes to the font through themes, I cannot seem to find the correct class to change JUST the header fonts (in both editor and preview). I have also checked through the CSS as best I could in developer mode to no avail… I’ve tried --h1-font-family, --h1-font --h1-fontfamily, --h1-text-editor etc etc… I have also tried a CSS Snippet using the following

h1 {
  font-family: arial;
}

and have made sure to enable the snippet.

Edit: I have had some success in that the code snippet DOES apply to the preview, but not to the editor, which is the other CSS class I cannot seem to figure out.

h1 {
     editor-text: arial;
}

Where editor-text is I have also tried editor-font-family etc etc…

What I’m trying to do

Set a unique font for my headers that is different from the rest of the editor/preview fonts, ideally through CSS snippets or something similar. I’m not sure the order in which things apply (Themes < CSS Snippets would be what I would expect but again, not sure.)

Thank you!

[Liefbread]

I continued to do some digging and found this topic about customizing header colors and that proved to be the key.

.view-header-title {
 font-family: arial;
}
.cm-header-1
{
font-family: arial !important;
}
.cm-header-2
{
font-family: arial !important;
}
.cm-header-3
{
font-family: arial !important;
}
.cm-header-4
{
font-family: arial !important;
}
.cm-header-5
{
font-family: arial !important;
}
.cm-header-6
{
font-family: arial !important;
}

.markdown-preview-view h1
{
font-family: arial !important;
}
.markdown-preview-view h2
{
font-family: arial !important;
}
.markdown-preview-view h3
{
font-family: arial !important;
}
.markdown-preview-view h4
{
font-family: arial !important;
}
.markdown-preview-view h5
{
font-family: arial !important;
}
.markdown-preview-view h6
{
font-family: arial !important;
}

Solved

[efemkay]

i guess to help u reduce the clutter (since u want to use same font family for all headers) of the above css snippet, you can write it as per below

.view-header-title { font-family: arial; }

/* change header font in editing view */
.cm-header-1,
.cm-header-2,
.cm-header-3,
.cm-header-4,
.cm-header-5,
.cm-header-6 {
    font-family: arial !important;
}

/* change header font in reading view */
.markdown-preview-view h1,
.markdown-preview-view h2,
.markdown-preview-view h3,
.markdown-preview-view h4,
.markdown-preview-view h5,
.markdown-preview-view h6 {
    font-family: arial !important;
}

[Liefbread]

Thank you! Much appreciated