I'm working on adding Google Web Font functionality to my current project.
I've mostly got it working, but my situation is different than the others I've been reading about on this forum, StackOverflow, etc.
I'm setting it up so that a client can specify up to five Google Fonts to have access to, and I'm attempting to dynamically load those fonts into the RTE.
The trick is, when loading up the page with the RTE, I've been including some CSS styles appropriate to the content being edited. I cannot just write all this stuff out to an external CSS file and load it, because the RTE is used to edit different areas of a page, which have different styles applied to the content as a whole.
What I'm trying to do is work the contentsCSS call within my ckeditor.replace() call to both accept an external CSS link (the Google Fonts call) and my own styles, and I'm bashing my head against a wall trying to figure out the syntax.
contentsCSS : ['http://fonts.googleapis.com/css?family=Font1|Font2|Font3'], [ (output of my own CSS here) ]',
works as far as loading the Google file, but my CSS styles don't get applied.
Is there a way to load both an external file and raw stylesheet info in this manner? Or am I screwed?
Edit: Here's the solution for anyone else going this route:
in ckeditor.replace(), define your font_names with the Google Web Font names in the mix, separated by semicolons as normal - and then when passing in your own CSS stylesheet code (rather than pointing to an external file) to contentsCSS, just add
@import url("http://fonts.googleapis.com/css?family=Font1|Font2|Font3");
into the mix.
I've seen where you can code up contentsCSS to load multiple external CSS files, and loading the Google Fonts CSS via that method should work fine when linking to another external CSS file.