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

Answer 1

You need to set the theme_advanced_fonts configuration parameter according to your needs. In case you need to add the font to the editor iframe head contect.css with @font-face is the right way.

Answer 2

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 3

I have researched this solution by installing the Papyrus font, and it works well (without any @font-face in any css file), but researching with several browsers on a Mac (running Lion) I found that although it worked well in Safari and Firefox, the Papyrus option doesn't show up in the text editor font dropdown in Chrome. I see others have had some Chrome issues in related areas, so I'm not sure if this is fixable in Chrome or not.

I added Papyrus=Papyrus in the two .js files, in the same relative position order, and added the fonts folder as described, with font file Papyrus.TTF (upper and lower case as shown).

In Safari and Firefox this results in Papyrus in the dropdown, and Papyrus font in the editor text, and on the website page, exactly as required.

But not in Chrome since the font can't be chosen.

Answer 4

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