[Support request] Adobe fonts displaying in the page editor

Home Forums Support [Support request] Adobe fonts displaying in the page editor

Home Forums Support Adobe fonts displaying in the page editor

Viewing 15 posts - 1 through 15 (of 22 total)
  • Author
    Posts
  • #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
    Greg

    #1231993
    Tom
    Lead Developer
    Lead Developer

    Hi 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 🙂

    #1232328
    Greg

    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
    Greg

    #1232856
    Tom
    Lead Developer
    Lead Developer

    It could be the naming thing for sure. If the name of the font matches the one on your computer, it should display.

    #1237449
    Greg

    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
    Greg

    #1237970
    Tom
    Lead Developer
    Lead Developer

    You 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'] );
        }
    } );
    #1262703
    Greg

    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
    Greg

    #1263494
    Tom
    Lead Developer
    Lead Developer

    Hi 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?

    #1263566
    Greg

    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
    Greg

    #1263954
    Tom
    Lead Developer
    Lead Developer

    Ah, 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' );
    } );
    #1268542
    Greg

    Sorry for the slow reply, I must have missed the email.

    That’s worked perfectly, thanks for all your help Tom!

    #1268612
    Greg

    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
    Greg

    #1269279
    Tom
    Lead Developer
    Lead Developer
    #1269407
    Greg

    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
    Greg

    #1269696
    Tom
    Lead Developer
    Lead Developer

    We 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'] );
        }
    } );
Viewing 15 posts - 1 through 15 (of 22 total)
  • You must be logged in to reply to this topic.