Gutenberg Typography

How to show Adobe fonts in the WordPress block editor

We chose the Adobe Fonts Degular and Degular Display for our latest ElmaStudio redesign. It was no problem to include the fonts so that they would be visible on the front end of our website.

You only need to include the code snippet provided for your Adobe Fonts web project in your website’s header area. To not lose the snippet in the next theme update, we installed the free WordPress plugin Insert Headers and Footers and included the snippet via the plugin. We used the plugin again for our Helpscout badge code.

Custom CSS for the fonts

Okay, so far so good. Now you only need to add some custom CSS to overwrite your theme’s default font family. This will become much easier once Global Styles will be available (see WordPress 5.8 release). For the moment, I used the following custom CSS to overwrite our Aino theme’s default font families:

:root {
	--global--font-primary: 'degular-display', sans-serif;
	--global--font-secondary: 'degular', sans-serif;
}

Adobe Fonts in the editor

Now I see my new font in the front end of my website. Unfortunately the Adobe fonts are not visible in the editor by default, at least not at the current state. So I googled a bit and found a helpful function that I needed to add to the theme’s functions.php file.
It’s an improvised method, but I still wanted to share it here on the blog in case it’s helpful for someone else facing the same issues.
The following code needs to be in your functions.php. Don’t forget to include the correct Adobe web project URL.

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

I will update this post as soon as I find a more elegant way to include Adobe fonts in the editor view of WordPress. Do you maybe have a solution or any idea on how to tackle this issue? I would love to hear from you. Please leave a comment below for any tips or any questions.

Join the conversation

Leave a Reply

Your email address will not be published.