How to make JCE Editor display/preview template fonts

Demonstrate your product attractively using clean and distinctive coffe shop Joomla template.
GK User
Sun Jun 16, 2013 12:12 am
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.
User avatar
Fresh Boarder

GK User
Sun Jun 16, 2013 7:14 am
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:,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: Select all
@import url(,700);

2. In Components > JCE Editor > configurations > Editor Global Configuration > Formatting > Display > Editor Styles > Custom CSS
Code: Select all

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.

See you around...
User avatar
Platinum Boarder

GK User
Wed Jul 16, 2014 6:12 pm
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

User avatar
Platinum Boarder

Remember me
Register New Account
If you are old Gavick user, click HERE for steps to retrieve your account.