Adding a custom font to the TinyMCE editor in WordPress

2 comments

1. You can load CSS. In TinyMCE settings:

   content_css : "css/custom_content.css",
   

   Than custom_content.css should contain @font-face like:

   /* load a font */
   @font-face {
     font-family: 'Foo';
     src: local('Foo'), url('path/to/Foo.woff') format('woff');
   }
   
   h1 { font-family: 'Foo'; }
   

   Log in to Reply

2. There are my setups in my Plugin (not in theme). This worked with WordPress 4.9

   First, you need put you custom fonts to a folder. And linked them in a custom css file, you need to call full path in CSS. I my case, i put all my fonts in a folder luc-nham/css/fonts , then i call theme in CSS file.
   Note, in my case, my custom CSS file put into css folder and named custom_fonts.css, it will be use late.

   @font-face {
     font-family: 'iCielTALUHLA';
     src: url('http://localhost/lucnham/wp-content/plugins/luc-nham/css/fonts/fontsiCielTALUHLA.eot?#iefix') format('embedded-opentype'),  url('http://localhost/lucnham/wp-content/plugins/luc-nham/css/fonts/iCielTALUHLA.woff') format('woff'), url('http://localhost/lucnham/wp-content/plugins/luc-nham/css/fonts/iCielTALUHLA.ttf')  format('truetype'), url('http://localhost/lucnham/wp-content/plugins/luc-nham/css/fonts/iCielTALUHLA.svg#iCielTALUHLA') format('svg');
     font-weight: normal;
     font-style: normal;
   }
   /** Other fonts deracle same above */
   

   Then you need some funtions in your main plugin file like below:

   /**
    * Add fonts to TinyMCE select box
    */
   
   function ln_custom_fonts_init( $init ) {
       $custom_fonts = "TALUHLA=iCielTALUHLA;" .
                       "Other fonts=Other fonts;" .
                       "Other fonts=Other fontst;" .
                       "Other fonts=Other fonts";
       $init['font_formats'] = $custom_fonts;
       return $init;
   }
   add_filter( 'tiny_mce_before_init', 'ln_custom_fonts_init' );
   
   /**
    * Register custom CSS file, it also affect if you call wp_edior in frontend pages
    */
   
   function ln_custom_fonts_css( $mce_css ) {
       if ( ! empty( $mce_css ) )
           $mce_css .= ',';
   
       $mce_css .= plugins_url( 'css/custom_fonts.css', __FILE__ );
   
       return $mce_css;
   }
   add_filter( 'mce_css', 'ln_custom_fonts_css' );
   
   /**
    * Apply font live show in backend (when creating, editing a post, page)
    */
   
   function ln_admin_editor_fonts($hook) {
       if($hook != 'post-new.php') {
           return;
       }
   
       wp_register_style( 'custom_wp_admin_css', plugins_url( 'css/custom_fonts.css', __FILE__ ));
       wp_enqueue_style( 'custom_wp_admin_css' );
   }
   add_action( 'admin_enqueue_scripts', 'ln_admin_editor_fonts' );
   

   Log in to Reply