Databases
StackOverflow2013
Postsdbo
POAdding new fonts to TinyMCE font options
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAdding new fonts to TinyMCE font options
    text
    copied!<p>I have checked out this thread: <a href="https://stackoverflow.com/questions/4201296/google-fonts-and-tinymce">Google Fonts and TinyMCE</a> and have in fact previously even successfully added new fonts to the TinyMCE font options for users.</p> <p>But I'm not sure what's gone wrong here and why I'm not able to do it any more. I'm trying to add a new font, <code>Samman</code>, which I just got from MyFonts.com.</p> <p>In my TinyMCE initialization, I include this:</p> <pre><code>content_css : "css/fonts.css,css/userdesigntool.css,http://fonts.googleapis.com/css?family=Paytone+One,http://fonts.googleapis.com/css?family=Aclonica", </code></pre> <p><code>css/fonts.css</code> is where I've described new fonts. In this file, the new font I just saved in my <code>fonts/css</code> folder on my server is listed like this:</p> <pre><code>@font-face { font-family: 'sammanregular'; src: url('fonts/samman/samman-webfont.eot'); src: url('fonts/samman/samman-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/samman/samman-webfont.woff') format('woff'), url('fonts/samman/samman-webfont.ttf') format('truetype'), url('fonts/samman/samman-webfont.svg#sammanregular') format('svg'); font-weight: normal; font-style: normal; } </code></pre> <p>I got these generated off Font-Squirrel (as I have successfully done previously with other fonts), and I've double-checked to ensure that the files actually are on the expected path, and they are.</p> <p>In the <code>theme_advanced_fonts</code> entry of the TinyMCE initialization, I have this:</p> <pre><code> theme_advanced_fonts : tm_fonts, // some more stuff below </code></pre> <p>Where <code>tm_fonts</code> is a variable described in my javascript like this:</p> <pre><code>var tm_fonts = "Andale Mono=andale mono,times;"+ "Arial=arial,helvetica,sans-serif;"+ "Arial Black=arial black,avant garde;"+ "Book Antiqua=book_antiquaregular,palatino;"+ "Corda Light=CordaLight,sans-serif;"+ "Courier New=courier_newregular,courier;"+ "Flexo Caps=FlexoCapsDEMORegular;"+ "Lucida Console=lucida_consoleregular,courier;"+ "Georgia=georgia,palatino;"+ "Helvetica=helvetica;"+ "Impact=impactregular,chicago;"+ "Museo Slab=MuseoSlab500Regular,sans-serif;"+ "Museo Sans=MuseoSans500Regular,sans-serif;"+ "Oblik Bold=OblikBoldRegular;"+ "Sofia Pro Light=SofiaProLightRegular;"+ "Symbol=webfontregular;"+ "Tahoma=tahoma,arial,helvetica,sans-serif;"+ "Terminal=terminal,monaco;"+ "Tikal Sans Medium=TikalSansMediumMedium;"+ "Times New Roman=times new roman,times;"+ "Trebuchet MS=trebuchet ms,geneva;"+ "Verdana=verdana,geneva;"+ "Webdings=webdings;"+ "Wingdings=wingdings,zapf dingbats"+ "Aclonica=Aclonica, sans-serif;"+ "Michroma=Michroma;"+ "Paytone One=Paytone One, sans-serif;"+ "Andalus=andalusregular, sans-serif;"+ "Arabic Style=b_arabic_styleregular, sans-serif;"+ "Andalus=andalusregular, sans-serif;"+ "KACST_1=kacstoneregular, sans-serif;"+ "Mothanna=mothannaregular, sans-serif;"+ "Nastaliq=irannastaliqregular, sans-serif;"+ "Samman=sammanregular;"; </code></pre> <p>Now what's happening is that <code>Samman</code> does show up in the list of fonts that the user can choose in TinyMCE, but nothing happens to the text when I select this font, the text just remains on whatever existing font it was using.</p> <p>When I use the browser's debugger, sure enough I can see that the iframe of TinyMCE does include the right <code>css/fonts.css</code> file that mentions Samman. But when I change the font in TinyMCE, then I can see in the debugger that the <code>span</code> style's <code>font-family</code> for that text isn't changing. If I choose another font, the <code>span</code> style changes, but if I choose <code>Samman</code>, nothing happens.</p> <p>It's been a while since I added fonts so maybe I've just forgotten something? But I can't seem to figure it out.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload