Community Forums › Forums › Archived Forums › Design Tips and Tricks › Fonts in editor-style.css not showing in Visual Editor
Tagged: editor-style, executive pro, visual editor.
- This topic has 4 replies, 2 voices, and was last updated 8 years, 5 months ago by
Bart van Maanen.
-
AuthorPosts
-
August 3, 2016 at 7:21 am #190690
Bart van Maanen
ParticipantHi 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
August 10, 2016 at 11:11 am #191073Marcy
ParticipantYou 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
August 16, 2016 at 7:47 am #191378Bart van Maanen
ParticipantHi 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?
August 16, 2016 at 2:53 pm #191399Marcy
ParticipantYou 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
September 5, 2016 at 9:41 am #192638Bart van Maanen
ParticipantHi 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. -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.