How to use the webfont loader with add_editor style?

[carolinan]

To load the font in not only the block editor, but also the template editor and site editor, Gutenberg asks that theme authors use add_editor_style. (Using enqueue_block_editor_assets only works for the block editor not the other two)

How do we use the webfont loader with the array of styles to load with add_editor_style?

[TeBenachi]

The Webfont loader and theme.json alone seem to render the google fonts on the Block editor, Site editor, Template editor and front end. I did not have to use add_editor_style for the google fonts.

functions.php

wp_enqueue_style(
   'google-fonts',
   wptt_get_webfont_url( 'https://fonts.googleapis.com/css2?family=Kaisei+Decol:wght@400;700&display=swap' ),
   array(),
   $ver,
);

theme.json

"typography": {
   "fontFamilies": [
      {
         "fontFamily": "\"Kaisei Decol\", sans-serif",
         "slug": "kaisei-decol",
         "name": "Kaisei Decol"
      }
   ],
}

[carolinan]

The first time I tried it, I thought it worked, but it was only because the font I used was also installed on my system. Looking at the files in the source, the font file was not listed.

[bishless]

I'm wondering the same thing... not sure how to make the CSS file that gets created in the wp-content\fonts folder available to the editor.

[illycz]

Any news about that? Thanks

[seothemes]

@carolinan ran into the same thing, assumed they were loading in the editor but it was actually locally installed fonts. Here's how I managed to get it working:

$url = wptt_get_webfont_url( sprintf(
	'https://fonts.googleapis.com/css2?family=%s:wght@%s&display=swap',
	$font_family,
	$font_weights
) );

add_editor_style( '../../fonts/' . basename( $url ) );