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"
});
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.
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.
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)
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:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With