Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

TinyMCE 4 theme_advanced_fonts


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"
});
like image 914
v1n_vampire Avatar asked May 16 '13 08:05

v1n_vampire


People also ask

How do I change font size in TinyMCE?

Font size selection The TinyMCE rich text editor comes with 7 font size options by default, ranging from 8pt to 36pt. Depending on how TinyMCE is configured, users can select a font from the menubar or toolbar (via the fontsizeselect dropdown). A user selects a font size from the fontsizeselect toolbar menu.

How do I change CSS TinyMCE editor?

These content CSS files can be enabled in the editor using the content_css configuration option. Copied! These content CSS files can also be used as a template for creating a custom content CSS file for the editor. For the CSS files, see: tinymce-dist GitHub Repository - Content CSS files.


2 Answers

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

like image 165
v1n_vampire Avatar answered Oct 04 '22 04:10

v1n_vampire


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

like image 32
Ali Gonabadi Avatar answered Oct 04 '22 04:10

Ali Gonabadi