Adding new fonts to TinyMCE font options

Question

I have checked out this thread: Google Fonts and TinyMCE and have in fact previously even successfully added new fonts to the TinyMCE font options for users.

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, Samman, which I just got from MyFonts.com.

In my TinyMCE initialization, I include this:

content_css : "css/fonts.css,css/userdesigntool.css,http://fonts.googleapis.com/css?family=Paytone+One,http://fonts.googleapis.com/css?family=Aclonica", 

css/fonts.css is where I've described new fonts. In this file, the new font I just saved in my fonts/css folder on my server is listed like this:

@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;

}

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.

In the theme_advanced_fonts entry of the TinyMCE initialization, I have this:

    theme_advanced_fonts : tm_fonts,
            // some more stuff below

Where tm_fonts is a variable described in my javascript like this:

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;";

Now what's happening is that Samman 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.

When I use the browser's debugger, sure enough I can see that the iframe of TinyMCE does include the right css/fonts.css file that mentions Samman. But when I change the font in TinyMCE, then I can see in the debugger that the span style's font-family for that text isn't changing. If I choose another font, the span style changes, but if I choose Samman, nothing happens.

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.

Solution

Okay I discovered the problem.

I saw the last line of the list of fonts in the theme_advanced_fonts list was this:

                "Mothanna=mothannaregular, sans-serif;"+
                "Nastaliq=irannastaliqregular, sans-serif;"+
                "Samman=sammanregular;",

All I had to do was get rid of the semi-colon at the end, so the new font showed up fine with this:

                "Mothanna=mothannaregular, sans-serif;"+
                "Nastaliq=irannastaliqregular, sans-serif;"+
                "Samman=sammanregular",

Comments

[patrickdavey]

If you happen to be using TinyMCE 4.x change theme_advanced_fonts to font_formats as per tinymce.com/wiki.php/Configuration:font_formats

[donnapep]

You're assuming the OP is using WordPress, when in fact that doesn't sound like the case at all.