TinyMCE Advanced
Add a custom font to the plugin (9 posts)

  1. omerb159
    Posted 1 year ago #

    hi how i can add a custom font to the plugin??
    thanks allot omer


    [Moderator Note: Stop bumping!]

  2. Andrew Ozz
    WordPress Dev
    Plugin Author

    Posted 1 year ago #

    Adding custom font to the plugin won't do anything. You can add a custom font to the editor with the mce_css filter just like any other stylesheet. Will need a small WP plugin to do that.

  3. crlannen
    Posted 1 year ago #

    Which plugin do you recommend?

  4. tonnick0033
    Posted 11 months ago #

    hello ! I am in same situation ! could you please detail a little bit more how to add a custom font to tiny advanced ? thx !

  5. Andrew Ozz
    WordPress Dev
    Plugin Author

    Posted 11 months ago #

    You can define the font choices shown in the Font Family drop-down: http://www.tinymce.com/wiki.php/Configuration:font_formats.

    Of course that won't actually add custom fonts to your site, you'll have to add the css to your theme and (perhaps) link to the font files from Google, etc.

  6. Lastbreath
    Posted 9 months ago #

    i was also searching how 2 add fonts to the font family and found this:

    add_filter( 'tiny_mce_before_init', 'wpex_mce_google_fonts_array' );
    function wpex_mce_google_fonts_array( $initArray ) {
        // Google Web Fonts
        $theme_advanced_fonts = 'Aclonica=Aclonica;';
        $theme_advanced_fonts .= 'Lato=Lato;';
        $theme_advanced_fonts .= 'Michroma=Michroma;';
        $theme_advanced_fonts .= 'Paytone One=Paytone One';
        // Default fonts for TinyMCE
        $theme_advanced_fonts .= 'Andale Mono=Andale Mono, Times;';
        $theme_advanced_fonts .= 'Arial=Arial, Helvetica, sans-serif;';
        $theme_advanced_fonts .= 'Arial Black=Arial Black, Avant Garde;';
        $theme_advanced_fonts .= 'Book Antiqua=Book Antiqua, Palatino;';
        $theme_advanced_fonts .= 'Comic Sans MS=Comic Sans MS, sans-serif;';
        $theme_advanced_fonts .= 'Courier New=Courier New, Courier;';
        $theme_advanced_fonts .= 'Georgia=Georgia, Palatino;';
        $theme_advanced_fonts .= 'Helvetica=Helvetica;';
        $theme_advanced_fonts .= 'Impact=Impact, Chicago;';
        $theme_advanced_fonts .= 'Symbol=Symbol;';
        $theme_advanced_fonts .= 'Tahoma=Tahoma, Arial, Helvetica, sans-serif;';
        $theme_advanced_fonts .= 'Terminal=Terminal, Monaco;';
        $theme_advanced_fonts .= 'Times New Roman=Times New Roman, Times;';
        $theme_advanced_fonts .= 'Trebuchet MS=Trebuchet MS, Geneva;';
        $theme_advanced_fonts .= 'Verdana=Verdana, Geneva;';
        $theme_advanced_fonts .= 'Webdings=Webdings;';
        $theme_advanced_fonts .= 'Wingdings=Wingdings, Zapf Dingbats';
        $initArray['font_formats'] = $theme_advanced_fonts;
        return $initArray;
    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 ) );
    add_action('admin_head-post.php', function() {
        @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);

    now if u insert this code in theme functions.php you will get those 4 fonts on the top of all existing fonts in the font family drop down and in the editor the fonts actualy work, but when you hit save and check the page they dont show, so if someone can check this and maybe find what needs to be changed so this code to actualy work...

  7. Andrew Ozz
    WordPress Dev
    Plugin Author

    Posted 8 months ago #

    @Lastbreath you will also need to add these fonts (pretty much in the same way) to your theme, so they are used on the front.

  8. journeyfromseed
    Posted 7 months ago #

    i need some help (like VERY step by step help) on how to configure the fonts as the tinymce wiki link above describes. do i add the entirety of the code? where? when i search for the font_formats code in the editor for the plugin i dont see it.

    trying to add google font raleway to the menu, which i believe is already added to my website bc it is set for one of my headers.

    thanks for all explicit directions!
    website is http://www.journeyfromseed.com if that is helpful.


  9. Andrew Ozz
    WordPress Dev
    Plugin Author

    Posted 7 months ago #

    To add a Google hosted font you need to add it in three places. The font file has to be loaded on the front-end of the site and inside the editor, then the "Font family" drop-down has to be configured to show the font's name.

    All of these can be done relatively easily if you make a child theme. You will need basic understanding of PHP and CSS though. For configuring the "Font family" drop-down you can either hard-code the setting using the tiny_mce_before_init WP filter (in the functions.php in your child theme) or use the https://wordpress.org/plugins/advanced-tinymce-configuration/ plugin.

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • TinyMCE Advanced
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic


No tags yet.