[kind of solved] Make TinyMCE show custom web fonts

[10010110]

As y’all know, TinyMCE can parse the site stylesheet and show the general styles that apply to single element selectors in the editor window. Now, is there any way to also make it show custom web fonts that are embedded with @font-face?

I’ve worked with Concrete5 CMS and there you can create an editor stylesheet as CSS file and put it in the theme directory, and TinyMCE would show exactly these styles. I found something along these lines in the TinyMCE documentation but as far as I know that would require to edit the core of the module and with an upgrade everything would be lost.

Or is there any different path I would need to specify in the @font-face rule?

[velden]

Have a look at the advanced tab of TinyMCE module. IIRC you can add custom options there.

[JohnnyB]

There's a lot you can do with TinyMCE - the devs that authored the module did a wonderful job of making it very customizable. Take a look at this article for some hints: http://blog.arvixe.com/customizing-the- ... de-simple/

[10010110]

Thanks guys. I know about the advanced configuration tab and that I can add custom CSS there but that’s exactly where my question came up. Usually TinyMCE takes styles from the default stylesheet and displays them alright. For example, in my stylesheet I have

Code: Select all

@font-face {
	font-family: 'Oxygen';
	src: url('[[root_url]]/schriften/oxygen.eot');
	…
}
…
…
/* and */
body {
	font: 14px/1.5 Oxygen, Arial, Helvetica, Sans-serif;
}
…
h2 {font-family: Graublau, "Arial Narrow", Arial, Helvetica, Sans-serif;}

TinyMCE does read and apply these styles but it doesn’t show the custom fonts but falls back to a standard web font, Arial in this case. Using Firebug I can see that it is using the CSS rules but apparently it’s not considering the web fonts. In fact, if I look up the element styles inside TinyMCE in Firebug I can actually see the @font-face rule but without “src: …” property; apparently it’s stripping it out (or it’s invalid for some reason).

Manually adding a @font-face rule in the advanced CSS options doesn’t change anything.

[JohnnyB]

I think it needs two things to make it work. (untested)

1) add the @font face into the advanced tab where you can add custom css rules (default is the li ruleset)
I think you will need to check the path to the font is correct. Remember TInyMCE is loading from a deep subdirectory... and {root_url} may not work in this option box.

2) add a custom configuration to support the custom font:

theme_advanced_fonts : 'Oxygen=Oxygen'

if there is more than one rule here, they need to be separated by commas...

[10010110]

Ah, I found the issue. When I opened the generated stylesheet with the additional TinyMCE styles appended I saw that it automatically adds an absolute path to the TinyMCE module directory before the URL I specified, so in my case, when I already removed the [[root_url]] part, I had, for example:

Code: Select all

url('/fonts/oxygen.eot');

Now, TinyMCE made this out of it:

Code: Select all

url(http://example.com/modules/TinyMCE'/fonts/oxygen.eot');

Note that it appended the path before the opening quote, too. So I had to remove the quotes and make it move out of the TinyMCE and modules directories, two levels up into my root directory like so:

Code: Select all

url(../../fonts/oxygen.eot);

The generated URL looks like this now:

Code: Select all

url(http://example.com/modules/TinyMCE/../../fonts/oxygen.eot);

and it appears to work – at least in the editor field.

I don’t need a custom fonts select field in the toolbar (I’ve removed that already). The only problem is that in the format dropdown it still doesn’t show the correct format. Apparently this is because it’s part of the admin UI and not using the public theme stylesheet. But that’s not a huge issue now. The most important part was to show the right fonts in the editor field.

Thanks for your input.

[JohnnyB]

Cool! so, what was the final code you added to the tinymce options?

[10010110]

That’s a complete rule:

Code: Select all

@font-face {
	font-family: 'Oxygen';
	src: url(../../fonts/oxygen.eot);
	src: url(../../fonts/oxygen.eot?#iefix) format('embedded-opentype'),
			url(../../fonts/oxygen.woff) format('woff'),
			url(../../fonts/oxygen.ttf) format('truetype');
	font-weight: normal;
	font-style: normal;
}

My font files are in the fonts directory in the web root. Since TinyMCE prepends the path to the TinyMCE module directory we need to add these two “slash-dot” commands (for the lack of the right term) to move two levels up (to the web root) again.

Of course, it just occurs to me, we could also just put a (second) font directory into the TinyMCE module directory and use a simple absolute path (e. g. url(/fonts/oxygen.ttf)) since that shouldn’t be overwritten anyway on module upgrades (unless you are using FTP and have strict settings where directories are replaced completely).