How to add new font to TinyMCE Advanced

4 comments

1. This is how to use Google Fonts, if you want to use TTF or similar follow this lead: Using True type fonts in web applications.

   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 ) {
       //$initArray['font_formats'] = 'Lato=Lato;Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats';
       $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;
   }
   

   

   Show the live font on the 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 ) );
   }
   

   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
   });
   

   Based on:

   • How to Add Google Web Fonts to Your TinyMCE Editor in WordPress
   • WordPress 3.9+ TinyMCE 4 Tweaks: Adding Styles, Buttons, Fonts, Drop-downs & Pop-Ups

   Log in to Reply
2. 1. Add the fonts to your fonts folder

   2. Make your fonts available in your css

      @font-face {
          font-family: 'Proxima Nova Regular';
          font-weight: 400;
          font-style: normal;
          src: url('./assets/fonts/proxima-nova/proxima-nova-regular.eot');
          src: url('./assets/fonts/proxima-nova/proxima-nova-regular.eot?#iefix') format('embedded-opentype'),   
               url('./assets/fonts/proxima-nova/proxima-nova-regular.woff')       format('woff'),  
               url('./assets/fonts/proxima-nova/proxima-nova-regular.ttf')        format('truetype'),  
               url('./assets/fonts/proxima-nova/proxima-nova-regular.otf')        format('opentype');
      }
      

   3. In functions.php (feel free to add/remove any of these fonts. This list is the default one and I added my “Proxima Nova Regular”.

      add_filter( 'tiny_mce_before_init', 'mce_custom_fonts' );
      function mce_custom_fonts( $init ) {
          $theme_advanced_fonts = "Andale Mono=andale mono,times;" .
                                  "Arial=arial,helvetica,sans-serif;" .
                                  "Arial Black=arial black,avant garde;" .
                                  "Book Antiqua=book antiqua,palatino;" .
                                  "Comic Sans MS=comic sans ms,sans-serif;" .
                                  "Courier New=courier new,courier;" .
                                  "Georgia=georgia,palatino;" .
                                  "Helvetica=helvetica;" .
                                  "Impact=impact,chicago;" .
                                  "Proxima Nova Regular=Proxima Nova Regular;" . /* This is my custom font */
                                  "Symbol=symbol;" .
                                  "Tahoma=tahoma,arial,helvetica,sans-serif;" .
                                  "Terminal=terminal,monaco;" .
                                  "Times New Roman=times new roman,times;" .
                                  "Trebuchet MS=trebuchet ms,geneva;" .
                                  "Verdana=verdana,geneva;" .
                                  "Webdings=webdings;" .
                                  "Wingdings=wingdings,zapf dingbats";
          $init['font_formats'] = $theme_advanced_fonts;
          return $init;
      }
      

   Log in to Reply

3. If you have local font you can use font face on the css

   tinymce init

   tinymce.init({
       font_formats: "Abel=abel,sans-serif;"+
       "Electrolize=electrolize,sans-serif;"+
       "Raleway=raleway,sans-serif;",
       fontsize_formats: "8pt 9pt 10pt 11pt 12pt 13pt 14pt 15pt 16pt 17pt 18pt 19pt 20pt 21pt 22pt 23pt 24pt 36pt",
       height          : 240,
       width           : 980,
       selector        : "textarea",
       content_css     : "path/to/external_fonts.css",
       plugins         : "table image autolink charmap print preview searchreplace code textcolor media link charmap emoticons",
   
       //  convert strong tag to b tag 
       extended_valid_elements: "table[class=data head],b/strong",
   
       toolbar         : [ "undo redo | fontselect fontsizeselect | alignleft aligncenter alignright alignjustify | styleselect table | image link unlink emoticons ",
                           "bold italic underline strikethrough subscript superscript | forecolor backcolor | bullist numlist outdent indent | blockquote subscript superscript charmap searchreplace | code preview"
       ],
       menubar         : false,
       relative_urls   : false
   });
   

   external_fonts.css

   @font-face {
       font-family : 'Raleway';
       font-style  : normal;
       font-weight : 400;
       src         : url(path/to/font/raleway.woff2) format('woff2'), /*Chrome/Opera*/
                     url(path/to/font/raleway.woff) format('woff'),   /*IE 9-10, Chrome, Firefox, Safari, Opera*/
                     url(path/to/font/raleway.eot);                   /*IE 8-11*/
       /* 
           Unicode range in Hex eg. 
           00FF in decimal is (16^1)*15 + (16^0)*15 = 240+15 = 255 
       */
       unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
   }
   
   @font-face {
       font-family : 'Electrolize';
       font-style  : normal;
       font-weight : 400;
       src         : url(path/to/font/electrolize.woff2) format('woff2'), /*Chrome/Opera*/
                     url(path/to/font/electrolize.woff) format('woff'),   /*IE 9-10, Chrome, Firefox, Safari, Opera*/
                     url(path/to/font/electrolize.eot);                   /*IE 8-11*/
       /* 
           Unicode range in Hex eg. 
           00FF in decimal is (16^1)*15 + (16^0)*15 = 240+15 = 255 
       */                  
       unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
   }
   
   @font-face {
       font-family : 'Abel';
       font-style  : normal;
       font-weight : 400;
       src         : url(path/to/font/abel.woff2) format('woff2'),  /*Chrome/Opera*/
                     url(path/to/font/abel.woff) format('woff'),    /*IE 9-10, Chrome, Firefox, Safari, Opera*/
                     url(path/to/font/abel.eot);                    /*IE 8-11*/
       /* 
           Unicode range in Hex eg. 
           00FF in decimal is (16^1)*15 + (16^0)*15 = 240+15 = 255 
       */ 
       unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
   }
   

   Log in to Reply

4. I was looking for the same thing exactly, until I came across this plugin:

   https://wordpress.org/plugins/kv-tinymce-editor-fonts/

   Just install it (after you already have TinyMCE Advanced, of course) and checkout its code file (under Plugins -> Edit).

   All you have to do is add the font definition (name) to the list of fonts in the designated code (located near the end of the main PHP file of this plugin) and add the list item code to another place in the code (a little bit below the first one).

   That’s it! Now you have the additional font(s) in the dropdown of the font family selection in the editor.

   Log in to Reply