Font family preview in TinyMCE

Question

I've the initialization of tinyMCE, where I've included new fonts in addition to the default ones:

tinyMCE.init({
  selector: '#htmleditor',
  theme: 'modern',
  width: '100%',
  height: 500,
  fontsize_formats: "4pt 6pt 8pt 10pt 12pt 14pt 18pt 24pt 36pt",
  content_css: ['fonts/CI.css'],
  font_formats: '[*DEFAULTFONTLISTOMITTED*]
  + NewFont1=NewFont1,NewFont1;NewFont2=NewFont2,Impact;NewFont3=NewFont3,NewFont3;',
});

As you can see, the structure for new fonts is:

NewFontName=NewFontNameClassInCSS,NewFontStyleForList

Well, if I put a font family that exists, for example Impact (second example) it changes the style BUT if I put one NewFont style it doesn't affects the text, it just stays in default style. Important: Everything works except the font preview

Any thoughts about this problem?

CI.css content:

@font-face {
  font-family: 'NewFontName';
  src: url('NewFontName.ttf') format('truetype');
}

jsFiddle example using custom font Thanks skobaljic

Answer 1

Unfortunately I can't back any of this up with documentation, but if we disect the codepen provided by @skobalijc, we can see that what TinyMCE itself is made up of some elements inserted directly into the DOM which make up the menus and UI, and an iframe for the content area.

What content_css: ['//fonts.googleapis.com/css?family=Indie+Flower'], does is to add a link into the content iframe, so nothing outside of that iframe has access to the font. The easiest fix is just to add a link to your font stylesheet

<link rel="stylesheet prefetch" href="//fonts.googleapis.com/css?family=Indie+Flower">

into the head of your main document as well as using the content_cssparameter in your TinyMCE initialisation, as you can see here: https://codepen.io/anon/pen/bMwwrG

Answer 2

tinyMCE does not state clearly on their font-format documentation (super short and quite meaningless). The link mentioned by @skobaljic, is from this question, and you can notice that even their developer uses "cursive"(generic family) instead of "indie flower".

Base on my own experience, tinyMCE can only display the generic family or font built in by your browser.

Lets say in chrome:

Agency FB; Aharoni; Algerian; Andalus; Angsana New; AngsanaUPC; Aparajita; Arabic Typesetting; Arial; Arial Black; Arial Narrow; Arial Rounded MT Bold; Baskerville Old Face; Batang; BatangChe; Bauhaus 93; Bell MT; Berlin Sans FB; Berlin Sans FB Demi; Bernard MT Condensed; Blackadder ITC; Bodoni MT; Bodoni MT Black; Bodoni MT Condensed; Bodoni MT Poster Compressed; Book Antiqua; Bookman Old Style; Bookshelf Symbol 7; Bradley Hand ITC; Britannic Bold; Broadway; Browallia New; BrowalliaUPC; Brush Script MT; Calibri; Calibri Light; Californian FB; Calisto MT; Cambria; Cambria Math; Candara; Castellar; Centaur; Century; Century Gothic; Century Schoolbook; Chiller; Colonna MT; Comic Sans MS; Consolas; Constantia; Cooper Black; Copperplate Gothic Bold; Copperplate Gothic Light; Corbel; Cordia New; CordiaUPC; Courier; Courier New; Curlz MT; DaunPenh; David; DilleniaUPC; DokChampa; Dotum; DotumChe; Dubai; Dubai Light; Dubai Medium; Ebrima; Edwardian Script ITC; Elephant; Engravers MT; Eras Bold ITC; Eras Demi ITC; Eras Light ITC; Eras Medium ITC; Estrangelo Edessa; EucrosiaUPC; Euphemia; FangSong; Felix Titling; Fixedsys; Footlight MT Light; Forte; FrankRuehl; Franklin Gothic Book; Franklin Gothic Demi; Franklin Gothic Demi Cond; Franklin Gothic Heavy; Franklin Gothic Medium; Franklin Gothic Medium Cond; FreesiaUPC; Freestyle Script; French Script MT; Gabriola; Gadugi; Garamond; Gautami; Georgia; Gigi; Gill Sans MT; Gill Sans MT Condensed; Gill Sans MT Ext Condensed Bold; Gill Sans Ultra Bold; Gill Sans Ultra Bold Condensed; Gisha; Gloucester MT Extra Condensed; Goudy Old Style; Goudy Stout; Gulim; GulimChe; Gungsuh; GungsuhChe; Haettenschweiler; Harlow Solid Italic; Harrington; High Tower Text; Impact; Imprint MT Shadow; Informal Roman; IrisUPC; Iskoola Pota; JasmineUPC; Jokerman; Juice ITC; KaiTi; Kalinga; Kartika; Khmer UI; KodchiangUPC; Kokila; Kristen ITC; Kunstler Script; Lao UI; Latha; Leelawadee; Levenim MT; LilyUPC; Lucida Bright; Lucida Calligraphy; Lucida Console; Lucida Fax; Lucida Handwriting; Lucida Sans; Lucida Sans Typewriter; Lucida Sans Unicode; MS Gothic; MS Mincho; MS Outlook; MS PGothic; MS PMincho; MS Reference Sans Serif; MS Reference Specialty; MS Sans Serif; MS Serif; MS UI Gothic; MT Extra; MV Boli; Magneto; Maiandra GD; Malgun Gothic; Mangal; Marlett; Matura MT Script Capitals; Meiryo; Meiryo UI; Microsoft Himalaya; Microsoft JhengHei UI; Microsoft New Tai Lue; Microsoft PhagsPa; Microsoft Sans Serif; Microsoft Tai Le; Microsoft Uighur; Microsoft YaHei; Microsoft YaHei UI; Microsoft Yi Baiti; Miriam; Miriam Fixed; Mistral; Modern; Modern No. 20; Mongolian Baiti; Monotype Corsiva; MoolBoran; NSimSun; Narkisim; Niagara Engraved; Niagara Solid; Nirmala UI; Nyala; OCR A Extended; Old English Text MT; Onyx; Palace Script MT; Palatino Linotype; Papyrus; Parchment; Perpetua; Perpetua Titling MT; Plantagenet Cherokee; Playbill; Poor Richard; Pristina; Raavi; Rage Italic; Ravie; Rockwell; Rockwell Condensed; Rockwell Extra Bold; Rod; Roman; Sakkal Majalla; Script; Script MT Bold; Segoe Print; Segoe Script; Segoe UI; Segoe UI Light; Segoe UI Semibold; Segoe UI Semilight; Segoe UI Symbol; Shonar Bangla; Showcard Gothic; Shruti; SimHei; SimSun; SimSun-ExtB; Simplified Arabic; Simplified Arabic Fixed; Small Fonts; Snap ITC; Stencil; Sylfaen; Symbol; System; Tahoma; Tempus Sans ITC; Terminal; Times New Roman; Traditional Arabic; Trebuchet MS; Tunga; Tw Cen MT; Tw Cen MT Condensed; Tw Cen MT Condensed Extra Bold; Utsaah; Vani; Verdana; Vijaya; Viner Hand ITC; Vivaldi; Vladimir Script; Vrinda; Webdings; Wide Latin; Wingdings; Wingdings 2; Wingdings 3; 微軟正黑體; 新細明體; 新細明體-ExtB; 標楷體; 細明體; 細明體-ExtB; 細明體_HKSCS; 細明體_HKSCS-ExtB

You can add any new fonts to your browser, however the effect only works on your computer or others who has the same font supported in their browser.

The reason why your content display all correct fonts is: after tinyMCE rendered its staff, it outputs the option telling the js to find the font you want (lets say NewFontName, and if content_css provided, go content_css find that font), but itself didn't load the font you imported.