✨

Quick Tip: Loading Adobe Fonts in the WordPress Theme Editor

, ,

I’ve been using the Block Editor as my primary page builder for several years now. I was a Gutenberg holdout, but as time has gone on I’ve realized how much easier it makes rapidly building out pages. Throw in the ability to create custom blocks, block variations, and patterns… it’s probably my most well-used tool in my toolkit nowadays.

When I’m working on a post or page, my editor-style.css gets loaded in just fine, along with my Adobe Fonts file, and everything displays in the editor with the correct typefaces. I manage that with this lil code snippet in functions.php:

// Enqueue editor styles
function enqueue_editor_assets() {
    wp_enqueue_style('adobe-fonts', '//use.typekit.net/NOTGIVINGAWAYFONTSLOL.css' );
    wp_enqueue_style('editor-styles', get_template_directory_uri() . '/editor-style.css', [], THEME_VERSION, 'all');
}
add_action( 'enqueue_block_editor_assets', 'enqueue_editor_assets' );

It’s pretty flawless – everything comes through just the way I want it to.

But the Theme Editor is, for some reason, a different beast. While I can load in my editor-style.css file with no issues, my Adobe Fonts file doesn’t get loaded in – meaning my Templates, Template Parts, and Patterns don’t display accurately, since my fonts are all wonky:

The footer of the Bruno's website on the front-end, showcasing the custom fonts in use.
The footer of the Bruno's website in the Theme Editor, where the fonts don't load and everything is a default serif font.

This particular little bug has been driving me up a wall for years. And I’ve found almost no solutions on Google. So, I decided to play around with it a bit, and the solution I found was surprisingly simple: just @import the stylesheet in your editor-style.css file.

Seriously. It’s that easy. Just pop this little baby in the top of your CSS file:

@import url("//use.typekit.net/NOTGIVINGAWAYFONTSLOL.css");

.editor-styles-wrapper {...

And then remove the enqueue from your functions.php file:

// Enqueue editor styles
function enqueue_editor_assets() {
    wp_enqueue_style('editor-styles', get_template_directory_uri() . '/editor-style.css', [], THEME_VERSION, 'all');
}
add_action( 'enqueue_block_editor_assets', 'enqueue_editor_assets' );

And you’re good to go.

I did have to play around with it, when working on my local server I was able to use a protocol-less // for the TypeKit URL, but on a live server I found I had to add https:// for it to work – you may have to experiment a little to see what works for your environment. But, hopefully, once you’ve figured that out, your fonts will load in every block-based editor across the entire site. Which, at least for me, makes editing parts of my theme a much nicer experience.