Fonts in editor-style.css not showing in Visual Editor

[Bart van Maanen]

Hi all,

I've set up an editor-style.css with Executive Pro theme, but both body and heading fonts are not showing in the Visual Editor.

I activated editor-style in functions using this code, which worked for me on other sites:

function executive_add_editor_styles() {
    add_editor_style( 'editor-style.css' ); 
}
add_action( 'admin_init', 'executive_add_editor_styles' );

Other elements like image alignment and font-size are working. I have tried clearing cache and all, but to no effect. Tried to place the code on different locations in functions.php. Nothing.

What could it be? Anybody knows a fix?

Thanks, Bart

[Marcy]

You need to add the fonts to the admin too.

A quick way in to use @import. Add a link like this to the top of your editor-style.css

@import url('//fonts.googleapis.com/css?family=Lora:400,400italic|Open+Sans:400,400italic,700,700italic');

Probably a better way is to enqueue the fonts in the admin; Robin Cornett mentions it in a post.
The section you would need is admin.php: Load Custom Fonts in the Admin
https://robincornett.com/visual-editor-styles/

---

Marcy | Amethyst Website Design | Twitter

[Bart van Maanen]

Hi Marcy, thanks for your helpful link.

I've tried setting it up like suggested in the post by Robin Cornett.

I created an admin.php file specific for the theme (testing with Parallax), placed it in an /includes/ directory, with referral code in functions.php:

add_action( 'genesis_setup', 'my-theme_setup', 15 );
function my-theme_setup() {
  include_once( get_stylesheet_directory() . '/includes/admin.php' );
}

And I have the `add_editor_style( 'editor-style.css' );' code in functions.php. (Without no changes at all in the Visual Editor)
Still the fonts don't change.

What point am I missing here?

[Marcy]

You need to follow Robin's instructions if you're going to use her method.

Add this to functions.php instead of what you have above:

add_editor_style( 'editor-style.css' );

// Add Google fonts to editor
add_action( 'after_setup_theme', 'leaven_editor_fonts' );
function leaven_editor_fonts() {
	$font_url = str_replace( ',', '%2C', '//fonts.googleapis.com/css?family=Open+Sans:300,400,700|Lora:400italic,700italic' );
	add_editor_style( $font_url );
}

If you want to use the @import method, then you still add this to functions.php instead of what you had before.
Note that it is NOT in a function.
add_editor_style( 'editor-style.css' );

And then at the top of editor-style.css you add:
@import url('//fonts.googleapis.com/css?family=Lora:400,400italic|Open+Sans:400,400italic,700,700italic');

---

Marcy | Amethyst Website Design | Twitter

[Bart van Maanen]

Hi Marcy,
The code does indeed works when added to functions.php directly. Using the /includes/admin.php method as Robin did, something hampered. I could not find the issue, but this will do for now.

[Author]

Posts