Custom Fonts (Adobe Fonts) in Editor

  • Resolved Sascha

    (@theartofpain)


    1 year, 10 months ago

    I use Adobe Fonts, embedded via custom CSS and the Custom Adobe Fonts Plugin a a clean and new WP-Installation.

    The Site shows the right fonts in the Frontend. But in the Editor, it shows just the regular Theme-Fonts. I found a Workaround by adding some Code to the themes function.php

    Code

    —

    /** * Show Adobe font in editor */ add_action( ‘enqueue_block_editor_assets’, function() { wp_enqueue_style( ‘adobe-fonts’, ‘Your Adobe Webproject URL here’ ); } );

    —

    Now in twentytwentythree, there is no functions.php anymore. Is there any similar workaround in the actual Version?

    Thanks for the help

    Sascha

    The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)

  • Hi @theartofpain

    On the Twenty Twenty-Three theme you can use the Create Block Theme plugin to add custom fonts to your site. When the plugin is active kindly go to Appearance > Manage theme fonts to upload custom themes to your site.

    @thelmachido how does that add fonts to your current theme?

    @theartofpain did you ever figure it out? I am looking to do the same but haven’t seen anything helpful yet.

    Hi, @acwaterston when you add the font using the Create Block Theme plugin I have responded to you here. Let’s continue the conversation there.

    I will be marking this issue as resolved, @theartofpain please feel free to re-open if you have any questions.

    This issue does not appear to be resolved at all.

    As @acwaterston noted here Adobe fonts are not licensed for local use. They need to be linked via css:

    <link rel=”stylesheet” href=”https://use.typekit.net/foobar.css”&gt;

    The resulting fonts are not accessible from the Appearance > Manage Theme Fonts tab

    Could @thelmachido please provide further instruction or point to documentation for what the steps are for actually configuring create-block-theme so that Adobe fonts can be used?

    Thanks!

    I should clarify that I have never had a problem using WPCode lite to append Adobe Fonts CSS to the public-facing site. The issue remains being unable to view those fonts in the editor.

    As @acwaterston noted here Adobe fonts are not licensed for local use. They need to be linked via css:

    <link rel=”stylesheet” href=”https://use.typekit.net/foobar.css”&gt;

    The resulting fonts are not accessible from the Appearance > Manage Theme Fonts tab

    Hi @rockdirector if want to access the CSS editor you can do so by adding this after your URL /wp-admin/customize.php and visiting the Additional CSS panel.

    However, I am not quite sure if that would be enough. I did a quick research and it seems like you might also need to add code to the header area of your theme. So I would suggest creating a child theme using the Create Block Theme plugin. You should then be able to see theme files similar to that of the classic themes.

    Let me know if that helps

    This works indeed, but there are two caveats:
    – As stated before, the font is not visible in the site editor or when editing a page. This is fairly inconvenient, as the site design now differs from the preview.
    – The font cannot be selected in the site editor. This means it is less easy to work with, and there is css loading the default editor font while this is undesired in this case.

    All in all, it would be preferable to add the font using the theme.json file. Is this possible?

    Moderator Kathryn Presner

    (@zoonini)

    @sjonvugt – To keep things better organized here and allow people to find your question (and its answers!) more easily, could you please start a new thread over in the Create Block theme forum? This one is over 4 months old and marked as resolved, and lots of things have changed. ?? Thanks!

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Custom Fonts (Adobe Fonts) in Editor’ is closed to new replies.