13


I'm trying to add custom font family in TinyMCE Editor version 4.0b1 and keep failing.
All default fonts show, custom fonts like 'Century Gothic' or 'Gill Sans MT' are not showing. Is theme_advanced_fonts not working in TinyMCE 4? I can't find any TinyMCE 4 documentation for this.

tinymce.init({
  selector: "textarea",
  plugins: [
      "advlist autolink lists link image charmap print preview anchor",
      "searchreplace visualblocks code fullscreen",
      "insertdatetime media table contextmenu paste"
  ],
  toolbar: "undo redo | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist | link image | fontselect fontsizeselect | forecolor backcolor",
  convert_urls: false,
  content_css: 'http://www.mydomain.com/css/fonts.css',
  theme_advanced_font_sizes : "8px,10px,12px,14px,16px,18px,20px,24px,32px,36px",
  theme_advanced_fonts : "Andale Mono=andale mono,times;"+
                         "Arial=arial,helvetica,sans-serif;"+
                         "Arial Black=arial black,avant garde;"+
                         "Book Antiqua=book antiqua,palatino;"+
                         "Comic Sans MS=comic sans ms,sans-serif;"+
                         "Courier New=courier new,courier;"+
                         "Century Gothic=century_gothic;"+
                         "Georgia=georgia,palatino;"+
                         "Gill Sans MT=gill_sans_mt;"+
                         "Gill Sans MT Bold=gill_sans_mt_bold;"+
                         "Gill Sans MT BoldItalic=gill_sans_mt_bold_italic;"+
                         "Gill Sans MT Italic=gill_sans_mt_italic;"+
                         "Helvetica=helvetica;"+
                         "Impact=impact,chicago;"+
                         "Iskola Pota=iskoola_pota;"+
                         "Iskola Pota Bold=iskoola_pota_bold;"+
                         "Symbol=symbol;"+
                         "Tahoma=tahoma,arial,helvetica,sans-serif;"+
                         "Terminal=terminal,monaco;"+
                         "Times New Roman=times new roman,times;"+
                         "Trebuchet MS=trebuchet ms,geneva;"+
                         "Verdana=verdana,geneva;"+
                         "Webdings=webdings;"+
                         "Wingdings=wingdings,zapf dingbats"
});
manojlds
  • 290,304
  • 63
  • 469
  • 417
v1n_vampire
  • 1,575
  • 3
  • 13
  • 21

5 Answers5

7

Looks like TinyMCE 4 has been updated, custom fonts works now.

Check this link for the CSS font source: http://www.tinymce.com/wiki.php/Configuration:content_css

Check this link for the custom font setting: https://www.tinymce.com/docs/configure/content-formatting/#font_formats

The weird thing is, some of the fonts work (the font style on the custom font list name is correct - green), some not (custom font listed, but the style is not the supposed font style - red)

TinyMCE 4 custom font preview

Community
  • 1
  • 1
v1n_vampire
  • 1,575
  • 3
  • 13
  • 21
5

Looks like theme_advanced_fonts has problem and not fixed yet. I'm using an alternative solution with style_formats to define fonts

tinymce.init({
        ...
        toolbar: "styleselect",
        style_formats: [
            {title: 'Open Sans', inline: 'span', styles: { 'font-family':'Open Sans'}},
            {title: 'Arial', inline: 'span', styles: { 'font-family':'arial'}},
            {title: 'Book Antiqua', inline: 'span', styles: { 'font-family':'book antiqua'}},
            {title: 'Comic Sans MS', inline: 'span', styles: { 'font-family':'comic sans ms,sans-serif'}},
            {title: 'Courier New', inline: 'span', styles: { 'font-family':'courier new,courier'}},
            {title: 'Georgia', inline: 'span', styles: { 'font-family':'georgia,palatino'}},
            {title: 'Helvetica', inline: 'span', styles: { 'font-family':'helvetica'}},
            {title: 'Impact', inline: 'span', styles: { 'font-family':'impact,chicago'}},
            {title: 'Symbol', inline: 'span', styles: { 'font-family':'symbol'}},
            {title: 'Tahoma', inline: 'span', styles: { 'font-family':'tahoma'}},
            {title: 'Terminal', inline: 'span', styles: { 'font-family':'terminal,monaco'}},
            {title: 'Times New Roman', inline: 'span', styles: { 'font-family':'times new roman,times'}},
            {title: 'Verdana', inline: 'span', styles: { 'font-family':'Verdana'}}
        ],
        ...
});

result: using style_formats for defining fonts

Ali Gonabadi
  • 944
  • 1
  • 10
  • 28
  • I tried using my custom fonts font-family, and it's not working. The custom font names appeared but the font styles are not detected. I put the font css in both TinyMCE init and page CSS. – v1n_vampire May 28 '13 at 04:57
  • Oh, and I'm trying to send my text as email. It's said the custom font will appear in mail if I'm using "theme_advanced_fonts" since it detects my CSS source, does "style_formats" work too? – v1n_vampire May 28 '13 at 05:01
4
tinymce.init({
        ...
        font_formats: 
                "Default='myFontFace', Arial, Helvetica, Tahoma, Verdana, sans-serif;"+
                "Arial=arial,helvetica,sans-serif",
        ...
});
Krzysio
  • 51
  • 1
  • 2
    Good answers accompany code samples with an explanation for future readers. While the person asking this question may understand your answer, explaining how you arrived at it will help countless others. – Stonz2 Aug 07 '14 at 13:10
3

In tinymce 4, theme_advanced_fonts has been rename to font_formats.

You can find the detail from https://www.tinymce.com/docs/configure/content-formatting/#font_formats

channa ly
  • 9,479
  • 14
  • 53
  • 86
2

'advanced' and 'simple' theme is removed from tinyMCE 4. New theme added is called 'modern'.

http://www.tinymce.com/wiki.php/Tutorial:Migration_guide_from_3.x

Mokarom
  • 603
  • 5
  • 13