How to add Fonts to WordPress TinyMCE Editor
- Article
- Comment (4)
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 .
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” ;
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
Hi, it will work upto WordPress 3.8. Here I wrote an easy way to add it for WordPress 3.9 and above.
https://kvcodes.com/2014/05/how-to-add-google-webfonts-to-wordpress-tinymce-editor/
“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?
Answered Already