April 15, 2014

WordPress: Custom font family in TinyMCE editor

I tried to add custom font family to the WordPress editor but it turns to the little battle - firstly I just do what is described in the WordPress Codex:

your-theme/functions.php:
<?php
function your_theme_editor_styles() {
    add_editor_style('assets/css/editor-style.css');
}
add_action('init', 'your_theme_editor_styles');
?>

your-theme/assets/css/editor-style.css:
@font-face {
    font-family: CharisSILBold;
    src: url(../fonts/CharisSIL-Bold.woff);
}

body#tinymce.wp-editor { 
    font-family: CharisSILBold; 
    font-size: 14pt;
}

But it doesn't work (of course). Then I look into the default theme and found the solution (code in functions.php is the same as before so here only editor-style.css):

your-theme/assets/css/editor-style.css:
@font-face {
    font-family: CharisSILBold;
    src: url(../fonts/CharisSIL-Bold.woff);
}

html .mceContentBody { 
    font-family: CharisSILBold;
    font-size: 14pt;
}

It sucks that small things take so much time (but of course it's my fault).

Tested on WP 3.8.*.



No comments: