Adobe fonts in WordPress Gutenberg preview

[julianc31943986]

I have followed the instructions to add Adobe fonts to my WordPress site, including adding the <link rel="stylesheet" href="https://use.typekit.net/ljb5yyx.css"> code to the head.

It all works fine on the front end, but in the Gutenberg preview I just get times new roman.

How should I set it up so that the correct fonts get used in the Gutenberg preview, as well as on the front end of the site?

I'm guessing that the typekit code you add into the header is not included on the admin screens, is that why it doesn't work? Is there a way round that?

[Neelamk]

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

[julianc31943986]

I moved the <link rel="stylesheet" code from the page header into my css files, and now I can see the correct fonts in the Gutenberg previews. Strangely it is also adding the font to the WordPress media library now, but that's not such a big problem.

[Eliza291714382ydo]

I've followed the instructions to incorporate Adobe fonts into my WordPress [url=https://trackthiscourier.com/]website[/url], which involved inserting the &lt;link rel="stylesheet" href="https://use.typekit.net/ljb5yyx.css"&gt; 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?

[Mary24248947wyu8]

Is there an article that says how to add an Adobe font in Wordpress 6.2?

[Sveinbjorn Palsson · Accepted solution]

Nope. I'm searching for such a thing now. Neither Wordpress nor Adobe seem to care about the products working together. It's really really sad.

[bradhighgate]

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

@Import 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' );

[adaml88563661]

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

https://use.typekit.net/kit-id.css

then in theme.json under settings.typography.fontFamilies define the fonts.  but with the new font manager i feel like there should be a better way

i woldnt call this solved