How to add a new font in tinymce editor?

Question

I want to add new font in tinymce editor which are display in font dropdown and apply to editor text.

I try to add ttf font in fonts folder of advance themes skin folder and also add in editor_template.js and add css in contect.css for @font-face.

I got font name in fonts dropdown. But when i apply to any text no any font effect on that text.

What is actual problem i can't found. Hope this is path issue or other...

Answer 1

I solved the issue,

Check all the possible issues below and fix them to add a font in TinyMCE editor.

• Create fonts folder : tinymce/themes/advanced/ - if not exists.

  1. Put font in fonts "tinymce/themes/advanced/fonts/aphrodite_pro.ttf.

  2. Add font in editor_template.js & editor_template_src.js include in "theme_advanced_fonts"

     Ex: theme_advanced_fonts: "Aphrodite Pro=aphrodite pro",

• Maintain "theme_advanced_fonts" font name sequence in above both js files.

Most important part: "Aphrodite Pro" name is defined by us where "aphrodite pro" is the name of the font.

Note this might not work in TinyMCE version 4 or higher. Check new documentation: https://www.tinymce.com/docs/configure/content-formatting/#font_formats