Site logo

Archived topic

Getting "-apple-system" font for Classic Editor

20 replies · Started by ch1800 on February 11, 2022

Viewing posts 1–15 of 21

Hello,

I always had Georgia as default for my Classic Editor with TinyMCE in backend here and with all other themes, but now I get an ugly "apple-system" font, apparently since I updated both the theme and GPP to the latest versions.

Is this something configurable?

https://pasteboard.co/TCgT1OVpyPon.jpg

Thanks for sharing Narender!

Many thanks for this Narender but it really doesn't work for me!
Tested at 2 sites so far and cannot see any change.

Did I miss something?

This is unlikely a GP issue as it doesn't add anything to the classic editor.

Can you activate a Twenty series WP theme and see if the issue occur there as well?

Thanks Leo but I'm a bit lost here and I'm not sure Narender's post above was really relevant to mine here.

My question still is "why I'm I getting "apple-system" font in Classic Editor (backend only) since last updates, as I don't work on Macs, it is really ugly and I previously always had Georgia in the editor.

Adding the snippet referenced above doesn't change anything.

Testing with other Twenty fonts changes this default font to something else every time. I tested also with a free version of Astra and I'm still getting Georgia.

Just to confirm, the default font in the editor changes to Georgia when you switch the theme on the same site?

And what happens if you activate a Twenty series WP theme?

Any custom functions added?

Not exactly. Just to make sure, I'm talking here about the default font I get in Classic Editor screen at backend - not affecting the frontend.

So, this is how it was always looking like with GP and this screenshot is with Astra free, WP 5.9:
https://pasteboard.co/fzVnei9TkhXa.jpg

And this is how the same text looks now in GP, after the latest updates:
https://pasteboard.co/1Dh9jHxPrquh.jpg

There are no other snippets running at the testing site I'm currently using and adding the one provided by Tom in the previous thread doesn't change anything.

Twenty themes are all changing this default font to something else every time but never to this super ugly "apple-system" font that doesn't seem to be really recognized as it doesn't even appear in the font list generated by TinyMCE:
https://pasteboard.co/42pMnypMg4Hf.jpg

Looks like a substitution font for another one that is missing.

You cannot see the problem because you just typed only 2 words and you didn't install TinyMCE that reveals the font used in there, but you are certainly getting the exact same issue! Just inspect the editor window and you'll see the fonts used.

For the demonstration, I just installed a fresh WP completely empty and no plugins other than Classic Editor (you'll find admin credentials posted here).

So, using the default Twenty22 theme out of the box, without doing anything else I get what I was always getting, the editor with Georgia font as you can see with the inspector here, using the WP's Sample Page:
https://pasteboard.co/buukUEjcJltl.png

Now, I just install and activate the GP theme, go back to the same page and you can clearly see that the editor is not using the same font anymore and this is clearly shown in inspector here:
https://pasteboard.co/AYAlFHSo5FUF.png

And those fonts are loaded from this GP stylesheet:
wp-content/themes/generatepress/assets/css/admin/editor-typography.css

as seen here: https://pasteboard.co/Be0O85NNSXIz.png

Please check with the only page at this test site, thanks.

Hi there,

you will need to install a child theme, and here Tom tells you where to add the editor stylesheet in the child theme:

https://generatepress.com/forums/topic/classic-editor-issue-latest-gp-update-messed-up-the-editor/#post-2113200

And for that stylesheet you can copy this one:

https://github.com/tomusborne/generatepress/blob/master/assets/css/admin/editor-typography.css

And just change this line to load the font you require:

font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

Thanks David, but I really don't want to install a child theme for all GP sites I manage just for that!
I really don't need a child theme for anything else and it is not worth doing all this just for the editor font.

But I find really regrettable we cannot load the correct fonts by default.
Why other themes like Twenty22 or Astra don't have such issues?

There is really no snippet I can run that loads the correct stylesheet?
What is that for https://generatepress.com/forums/topic/classic-editor-issue-latest-gp-update-messed-up-the-editor/#post-2112972
and why does it have zero effect here while the other OP says it works?

Hi there,

You can tell GeneratePress only to load the old classic editor styling like this:

add_filter( 'generate_editor_styles', function( $editor_styles ) {
    $editor_styles = array( 'assets/css/admin/editor-style.css' );

    return $editor_styles;
} );

That should ensure that no other styles from the theme (intended for the block editor) are loaded.

Let me know :)

Thanks Tom, I appreciate your feedback but this doesn't seem to work as noted here in my previous last message.

In fact, I tested this from the beginning at several sites as your previous post:
https://generatepress.com/forums/topic/classic-editor-issue-latest-gp-update-messed-up-the-editor/#post-2112972
was previously suggested here above and this is the reason why I continue posting here.

I setup this testing site that is referenced here with admin credentials just for this purpose and for avoiding any discussion about plugin conflicts etc. I just added again the snippet you are suggesting and if you login in there you'll see that it really doesn't work.

Again, just to be clear, I don't need anything special or fancy with those fonts, just the normal default behaviour with the Georgia family I always had in the editor, that same I still get with other themes.

The code I provided above is actually slightly different than the code I provided previously. This one should solve the issue for you.

Let me know :)

This archived topic is closed to new replies.