Adobe fonts in WordPress Gutenberg preview

To get the fonts in the block editor you need import the css for the kit from 

For client-side fonts to appear, add this to the top of style.css:

@1552174 url("https://use.typekit.net/yourprojectid.css");

 For Gutenberg (block editor in FSE sites), enqueue by adding to functions.php

function enqueue_editor_assets() {
    wp_enqueue_style('editor-styles', 'https://use.typekit.net/yourprojectid.css' );
}
add_action( 'enqueue_block_editor_assets', 'enqueue_editor_assets' );

I've followed the instructions to incorporate Adobe fonts into my WordPress [url=https://trackthiscourier.com/]website[/url], which involved inserting the <link rel="stylesheet" href="https://use.typekit.net/ljb5yyx.css"> code into the header.

Although everything works fine on the front end, the Gutenberg preview only displays Times New Roman. How can I configure the setup to ensure that the correct fonts are used in both the Gutenberg preview and the website's front end?

My assumption is that the typekit code added to the header is not included in the admin screens, which may be the reason why it isn't functioning correctly. Is there a workaround for this issue?

Hi Julian,

Welcome to our Community Forum. Thank you for reaching out to us. Could you please provide more information:

If the issue is only with Gutenberg preview, do you have any other way to check if it replicates the same?

Also is this the first time you are experiencing the issue? Any screenshot of the issue would be much appreciated. You could refer to the below articles to know more about adding fonts to the website and its troubleshooting.

https://helpx.adobe.com/fonts/using/add-fonts-website.html

https://helpx.adobe.com/fonts/kb/troubleshoot-adding-fonts-website.html

Please let me know how it goes and if it is helpful along with the details asked. We hope to hear from you soon.

Regards,

Neelam