Using 3rd party CSS in designs

[Anthony_McLin]

I'm working with a copy of Geometrix, and when I try to include Google fonts using the @import method, they only show when viewing the page in Debug Mode: page.html?debugClientLibs=true

I presume this is because when a page is normally viewed, AEM is trying to parse the @import statement and include the remote CSS from Google into a compiled CSS file.

What's the best way to go about getting 3rd party CSS included at the Designs level since @import won't work?

[smacdonald2008]

Put the CSS into a cq:ClientLibraryFolder node. For example:

[img]clientlibs.png[/img]

Notice the CSS file here.  You can then reference the cq:ClientLibraryFolder from your CQ web page. 

[justin_at_adobe · Accepted solution]

Hi Anthony,

I tried quickly to reproduce your problem and couldn't. If you want to provide more specific steps to reproduce, that might help.

I do, however, have a guess... the CSS specification requires that @import be at the top of your stylesheet before everything else (except @charset). So... when AEM is concatenating your CSS files, maybe the @import is ending up in the middle and the browser is ignoring it?

Again, just a guess. But I've been bitten by that in the past.

Justin

[Anthony_McLin]

The point is I can't put the CSS there. The CSS is hosted on Google's CDN and normally included using @import.

I can use their Javascript include method, but that's not as ideal.

[Yogesh_Upadhyay]

Not sure if this is related but,

If you are using clientLib with @import in CQ5.5 make sure that you do http://helpx.adobe.com/cq/kb/upgrade-yui-compressor.html.

Yogesh

[Anthony_McLin]

Steps to reproduce.

1. Add a CSS file in /etc/designs/yourapp....../clientlibs
2. Register that CSS file in css.txt
3. At the top of that CSS file, insert an @import statement to get a google font
   •   @import url(http://fonts.googleapis.com/css?family=Roboto);
4. Style some stuff from the same file
   • * { font-family: "Roboto", sans-serif }
5. View your site from the authoring instance with page.html?debugClientLibs=true
   • your content should be styled with the Google web font
6. View the same URL from the authoring instance with page.html  (no debugClientLibs)
   • content will not be stylied with the Google web font

Register

[Scott_Brodersen]

Hi Anthony,

I followed your steps but I couldn't reproduce. The font family was Roboto with and without the debugClientLibs param in the url. I don't know what to suggest however (sorry)

scott