- This topic has 21 replies, 2 voices, and was last updated 2 years ago by
Tom.
-
AuthorPosts
-
April 8, 2020 at 10:15 am #1231588
Greg
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 #1231993Tom
Lead 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 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentApril 9, 2020 at 4:21 am #1232328Greg
Thanks 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 #1232856Tom
Lead DeveloperLead DeveloperIt could be the naming thing for sure. If the name of the font matches the one on your computer, it should display.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentApril 13, 2020 at 8:02 am #1237449Greg
Ahh 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 #1237970Tom
Lead 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'] ); } } );
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentApril 30, 2020 at 3:53 am #1262703Greg
Missed 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 #1263494Tom
Lead 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?Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentApril 30, 2020 at 10:30 am #1263566Greg
Hi 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 #1263954Tom
Lead 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' ); } );
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentMay 4, 2020 at 4:24 am #1268542Greg
Sorry 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 #1268612Greg
One 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 #1269279Tom
Lead DeveloperLead DeveloperHi Greg,
That’s what this CSS should do: https://generatepress.com/forums/topic/adobe-fonts-displaying-in-the-page-editor/#post-1237970
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentMay 4, 2020 at 12:03 pm #1269407Greg
Hi 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 #1269696Tom
Lead 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'] ); } } );
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development -
AuthorPosts
- You must be logged in to reply to this topic.