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

Answer 2

Using Google Fonts i've just achieve this issue using two lines (in TinyMCE initialization):

content_css: ['https://fonts.googleapis.com/css?family=Gugi'],
font_formats: 'Arial Black=arial black,avant garde;Gugi=Gugi, cursive;Times New Roman=times new roman,times;',

The new font is called Gugi and will appear between arial black and times new roman