Hi David,
Okay, to get the font to display properly throughout, there are three places where the font style must be defined:
1) The content editor css.
2) The admin panel css.
3) The front-end css.
These correspond (respectively) to the following:
1) For rending the font inside the content editor.
2) For rendering the font inside the dropdown list.
3) For rendering the font on the front-end pages.
The purpose of the code snippet above (in your post) is to set the font names and font style to apply to each name; in the font dropdown selector; and apply that name to the selected content inside the editor. That’s it.
To get the style to render properly, the css declaration must be made in the three areas I mentioned above. It sounds like you have #3 already covered. So, you need to add the css for numbers one and two.
For number one; you need to add the css rule for your font to the content editor css. There are a number of ways to do this, but I’ll show one example implementation.
@font-face {
font-family: 'marker felt wide';
src: url(PATH_TO_THE_FONT.woff);
}
This needs to be saved as a stylesheet; and then applied to the content editor initialization values. Here is one way to do so:
function my_new_editor_fonts($init) {
// Define new stylesheet location
$new_css = "PATH_TO_THE_STYLESHEET.css";
// If current stylesheets exist; we need to add ours to exisitng
if(isset($init['content_css')) {
$old_css = $init['content_css'];
$init['content_css'] = $old_css . ', ' . $new_css;
}
// Else no current stylesheets; set ours as new
else {
$init['content_css'] = $new_css;
}
return $init;
}
add_filter( 'tiny_mce_before_init', 'my_new_editor_fonts' );
This applies the custom css (which contains the font declaration) to the content editor; which will make the font render properly in the content editor.
For number two; it’s a bit easier. You just need to create another stylesheet, with the same font declaration, and add it to the WordPress admin panel css.
The stylesheet will be the same as the one used in the first part of number one (above). The function to add the css is a bit different. One way is to add the css to all admin pages:
function load_custom_wp_admin_css() {
wp_register_style( 'my_custom_wp_admin_css', 'PATH_TO_THE_STYLESHEET.css', false, '1.0.0' );
wp_enqueue_style( 'my_custom_wp_admin_css' );
}
add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_css' );
This will load the custom css file into all admin pages. Doing so will make the font render properly in the font selector dropdown list.
Remember, the paths to your stylesheets need to be set properly. You may need to use different WordPress functions for the location to your css, depending on where you save the file.
Lastly, the Pro version REALLY simplifies this entire process.
Let me know if you get stuck along the way.
