How to make JCE Editor display/preview template fonts

Is there any simple way to configure JCE Editor to display (preview to the user as "wysiwyg") Coffe's customized fonts (set via the Template Manager>Font control panel--Google Fonts, in this case)?

I have customized several CSS selectors in this way to use a Google font and, although I can set/customize JCE to "grab" Coffe's various template *.css files, I cannot figure out how to do that with the Google font CSS selectors since their rules are generated dynamically by the template itself and writes them dynamically to a temporary *.css file.

I suppose I could "adapt" all my existing Coffe template CSS selectors to accommodate JCE's environment but I gotta believe, given that Gavick templates are so well thought-out, that there's a better way than that.

Anyone got an idea(s)? Thanks!

This is a Joomla! 2.5 site, BTW.

Following is how I do it if you want to add fonts to JCE Editor. As in preview this will show in font selector as well as in editor body.

My Example would be for following font

Code: Select all

Font url: http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700
Font name: Yanone Kaffeesatz


1. Add font url to editor.css. If you have more then one font add each url in a new line.
File: templates/gk_templatename/css/editor.css
Code:

Code: Select all

@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700);


2. In Components > JCE Editor > configurations > Editor Global Configuration > Formatting > Display > Editor Styles > Custom CSS

Code: Select all

templates/$template/css/editor.css


3. JCE Editor > Profiles , I choose default so choose your profile.
Editor Parameters > Typography > Additional Fonts. Please note how two fonts seperated ";"

Code: Select all

Arial =arial,helvetica,sans-serif;Yanone Kaffeesatz =Yanone Kaffeesatz


Now font previews displayed correctly in editor such as below.

Temporary Sample Shot.
http://awesomescreenshot.com/03c1eivdee


See you around...

Great tutorial. I was bitching with this problem for a long time. I use Squerelfonts but this is a good way to know and see how is done for Google fonts

Thanks,
Gorast