...
HTML, News, Wordpress

Add Custom font to TinyMCE Advanced

15 January 2019

In this lession, we learn how to add/replace the fonts displayed on the dropdown using filter function in theme’s functions.php file.

How to Add/replace the fonts displayed on the dropdown :

add_filter( 'tiny_mce_before_init', 'wpex_mce_google_fonts_array' );
function wpex_mce_google_fonts_array( $initArray ) {
    $theme_advanced_fonts = 'Aclonica=Aclonica;';
    $theme_advanced_fonts .= 'Lato=Lato;';
    $theme_advanced_fonts .= 'Michroma=Michroma;';
    $theme_advanced_fonts .= 'Paytone One=Paytone One';
    $initArray['font_formats'] = $theme_advanced_fonts;
    return $initArray;
}

custom-fon-in-tinymce-editor

 

How to Show Live Font in Dropdown :

add_action( 'admin_init', 'wpex_mce_google_fonts_styles' );
function wpex_mce_google_fonts_styles() {
   $font1 = 'http://fonts.googleapis.com/css?family=Aclonica:300,400,700';
   add_editor_style( str_replace( ',', '%2C', $font1 ) );
   $font2 = 'http://fonts.googleapis.com/css?family=Lato:300,400,700';
   add_editor_style( str_replace( ',', '%2C', $font2 ) );
   $font3 = 'http://fonts.googleapis.com/css?family=Michroma:300,400,700';
   add_editor_style( str_replace( ',', '%2C', $font3 ) );
   $font4 = 'http://fonts.googleapis.com/css?family=Paytone+One:300,400,700';
   add_editor_style( str_replace( ',', '%2C', $font4 ) );
}

 

How to Show the live font on the content box :

add_action('admin_head-post.php', function() {
    ?>
    <style>
    @import url(http://fonts.googleapis.com/css?family=Aclonica);
    @import url(http://fonts.googleapis.com/css?family=Lato);
    @import url(http://fonts.googleapis.com/css?family=Michroma);
    @import url(http://fonts.googleapis.com/css?family=Paytone+One); 
    </style>
    <?php
});

Leave a Comments