How to add Fonts to WordPress TinyMCE Editor |
X

Congrats, You are Subscribed to Receive Updates.

How to add Fonts to WordPress TinyMCE Editor


TinyMCE Editor is one of the popular web Rich text editor. It supports several fonts in default. And it’s flexible to add and remove your desired editor options into it. There are several CMS and Other sites using awesome editor TinyMCE Editor. WordPress is also one of the CMS, which using TinyMCE Editor.

So, you are an one of  an user now, and If  you want to make your site in your  local  language, you  can  add your  language  as  a  font  in  TinyMCE  Editor. It will be added to your rich text editor and as well as front end view. And it wont provide you the dictionary support for your local language. Here I will  give  you  some  tips  to  add your  desired  font  to  WP  TinyMCE Editor .

how-to-add-fonts-to-wordpress-tinymce-editor

1. How to add Custom Font in WP TinyMCE Editor ?

Here I will show you, how to add your own custom font into Your TinyMCE editor?  and here I am going to use Google web font “Coda” .First I get a copy of coda font.

The very first step is to show font selection option to your TinyMCE Editor, if you are a WordPress user, than You can write the following function in your functions.php, which helps you to add your custom font(Coda) into your TinyMCE Editor.

// Function Which helps to show Font family toolbar on the editor
function myformatTinyMCE($in)
{
$in['remove_linebreaks']=false;
$in['gecko_spellcheck']=false;
$in['keep_styles']=true;
$in['accessibility_focus']=true;
$in['tabfocus_elements']='major-publishing-actions';
$in['media_strict']=false;
$in['paste_remove_styles']=false;
$in['paste_remove_spans']=false;
$in['paste_strip_class_attributes']='none';
$in['paste_text_use_dialog']=true;
$in['wpeditimage_disable_captions']=true;
$in['plugins']='inlinepopups,tabfocus,paste,media,fullscreen,wordpress,wpeditimage,wpgallery,wplink,wpdialogs,wpfullscreen';
$in['content_css']=get_template_directory_uri() . "/editor-style.css";
$in['wpautop']=true;
$in['apply_source_formatting']=false;
$in['theme_advanced_buttons1']='formatselect,fontselect,forecolor,|,bold,italic,underline,|,bullist,numlist,blockquote,|,justifyleft,justifycenter,justifyright,justifyfull,|,link,unlink,|,wp_fullscreen,wp_adv';
$in['theme_advanced_buttons2']='pastetext,pasteword,removeformat,|,charmap,|,outdent,indent,|,undo,redo';
$in['theme_advanced_buttons3']='';
$in['theme_advanced_buttons4']='';
$in['theme_advanced_fonts']='Coda=Coda' ;
return $in;
}
add_filter('tiny_mce_before_init', 'myformatTinyMCE' );

After the step add the following code into your style sheet file.(Style.css).

@font-face {
font-family: 'Conv_coda';
src: url('coda.eot');
src: local('?'), url('coda.woff') format('woff'), url('coda.ttf') format('truetype'), url('coda.svg') format('svg');
font-weight: normal;
font-style: normal;
}

After all you TinyMCE Editor Support your custom font. and one more thing , you have to link the font on your html header section, and WordPress user include the line on your theme “Style.css” .

 

2. How to add Google fonts in WP  TinyMCE Editor ?

Instead of using the @font-face in your Style-sheet. You can directly use Google font importer .

@import url('https://fonts.googleapis.com/css?family=Coda');

The above line will include the font directly from Google web fonts.

 

3. How to add New  fonts in TinyMCE Editor Without php code ?

If you are customizing your TinyMCE editor Directly for your custom project, The following code will help you to add new fonts. Open your tinyMCE folder, than “tinymce\themes\advanced\fonts” initially Fonts folder is not available, you have to create it.

Than paste your font files here. you font files are having “ttf, woff, eot, svg” Extension, and include your font-face on a stylesheet

@font-face {
font-family: 'Conv_coda';
src: url('coda.eot');
src: local('?'), url('coda.woff') format('woff'), url('coda.ttf') format('truetype'), url('coda.svg') format('svg');
font-weight: normal;
font-style: normal;
}

In advance folder, there are two js files are there , namely, “editor_template.js, editor_template_src.js” . open it both on your text editor, than find the words “theme_advanced_fonts” after that add a small piece of code for attach your font file into the TinyMCE editor.

theme_advanced_fonts : "Coda=Coda;"

Than  you must write the same line on both files “ editor_template.js, editor_template_src.js” .

Now, you need to to give the path for reading of your custom fonts. So find the word “ content_css” on both files, than add a small piece of code into it, like this ” content_css : “path/to/style_sheet_which_contains your custom font info” ;

Note: This will Work upto the version of WordPress 3.8. From WP 3.9 onwards, you can do the operations without touching the corefiles. Read here For more Info .
commenter

About Varadharaj V

The founder of Kvcodes, Varadharaj V is an ERP Analyst and a Web developer specializing in WordPress(WP), WP Theme development, WP Plugin development, Frontaccounting(FA), Sales, Purchases, Inventory, Ledgers, Payroll & HRM, CRM, FA Core Customization, PHP and Data Analyst. Database Management Advance Level

4 comments

  1. commenter

    Its not working for me I have Worpdress 3.9.1 and want to add those function but there is only modern folder in my tinymce

  2. commenter

    “In advance folder, there are two js files are there , namely, “editor_template, editor_template_src””
    Hi I use Worpress 3.9.1 and I don*t have those files where can I find them?

Reply to Mark Cancel reply

Your email address will not be published. Required fields are marked *

*

Current ye@r *

Menu

Sidebar