- This topic has 21 replies, 2 voices, and was last updated 3 years, 10 months ago by Tom.
-
AuthorPosts
-
April 8, 2020 at 10:15 am #1231588Greg
Do you know why some Adobe fonts added to GP will display in the Gutenberg page editor (like they do on the front end) whilst others don’t and reverts to a fallback font?
I have two sites with the same setup where one shows the custom fonts in the backend editor, but the other doesn’t.
Would be great if I can figure out why, as it looks much nicer for letting the client edit with the typography matching to the front end.
Thanks for any help
GregApril 8, 2020 at 7:21 pm #1231993TomLead DeveloperLead DeveloperHi Greg,
Fonts will only display in the editor if you’ve added them using
@font-face
.If they’re displaying anyways, it means your computer has that font installed.
Let me know if you need more info 🙂
April 9, 2020 at 4:21 am #1232328GregThanks for the reply Tom.
That’s odd as I’ve set both up with Adobe fonts, and I have both fonts installed locally, maybe just a naming quirk of certain Adobe fonts then that it matches some locally but not others?
Thanks
GregApril 9, 2020 at 9:17 am #1232856TomLead DeveloperLead DeveloperIt could be the naming thing for sure. If the name of the font matches the one on your computer, it should display.
April 13, 2020 at 8:02 am #1237449GregAhh that must be it then, Adobe has slight variations in font names for locally installed versions vs webfonts – is there anyway of setting a different font for the editor in Simple CSS? Would be great to just setup a standard sans serif fallback?
Thanks
GregApril 13, 2020 at 4:45 pm #1237970TomLead DeveloperLead DeveloperYou can add your CSS from Simple CSS into the editor like this:
add_action( 'enqueue_block_editor_assets', function() { $options = get_option( 'simple_css' ); if ( isset( $options['css'] ) ) { wp_add_inline_style( 'generate-block-editor-styles', $options['css'] ); } } );
April 30, 2020 at 3:53 am #1262703GregMissed this reply, thanks Tom.
However, I just tried it out and I’m still seeing all the standard fonts in the editor, any ideas?
Thanks
GregApril 30, 2020 at 9:39 am #1263494TomLead DeveloperLead DeveloperHi there,
So your
@font-face
stuff is in Simple CSS, but your fonts in the editor haven’t updated?If you right-click + Inspect the text in the editor, can you see the
font-family
attributed to it?April 30, 2020 at 10:30 am #1263566GregHi Tom
Adobe fonts rather than @font-face, so I’ve added them to GP using this method – https://www.youtube.com/watch?v=ZSbhJ-twIDk – then just adjustments through Simple CSS (changed to rem’s, letter spacing, line height, etc.)
When I check the inspect CSS I can see it’s tried to load the font, but assume it’s not loading the Adobe Font CSS (as that’s setup as an element hooked to wp_head), is there anyway to run that same element in the WordPress backend?
Thanks
GregApril 30, 2020 at 4:53 pm #1263954TomLead DeveloperLead DeveloperAh, Elements won’t load in the editor.
You could try this:
add_action( 'enqueue_block_editor_assets', function() { wp_enqueue_style( 'my-fonts', 'YOUR TYPEKIT URL' ); } );
May 4, 2020 at 4:24 am #1268542GregSorry for the slow reply, I must have missed the email.
That’s worked perfectly, thanks for all your help Tom!
May 4, 2020 at 5:14 am #1268612GregOne extra question on this, is it also possible to load the Simple CSS in the page editor? I’ve tried adding the previous code supplied, but it doesn’t seem to make a difference.
Thanks for your time
GregMay 4, 2020 at 10:34 am #1269279TomLead DeveloperLead DeveloperHi Greg,
That’s what this CSS should do: https://generatepress.com/forums/topic/adobe-fonts-displaying-in-the-page-editor/#post-1237970
May 4, 2020 at 12:03 pm #1269407GregHi Tom
That’s what I thought, and tried to add back in but using the inspect tool I can see it’s not adding in the custom CSS, any other ideas on what might be causing that?
Thanks
GregMay 4, 2020 at 4:45 pm #1269696TomLead DeveloperLead DeveloperWe can debug it. If you add the following, does it add anything at the top of the editor when you refresh?:
add_action( 'enqueue_block_editor_assets', function() { $options = get_option( 'simple_css' ); var_dump($options); if ( isset( $options['css'] ) ) { wp_add_inline_style( 'generate-block-editor-styles', $options['css'] ); } } );
-
AuthorPosts
- You must be logged in to reply to this topic.