Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Using 3rd party CSS in designs

Anthony_McLin
Level 2
Level 2

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?

1 Accepted Solution
justin_at_adobe
Correct answer by
Employee
Employee

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

View solution in original post

6 Replies
smacdonald2008
Level 10
Level 10

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
Correct answer by
Employee
Employee

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

View solution in original post

Anthony_McLin
Level 2
Level 2

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
Level 5
Level 5

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
Level 2
Level 2

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
  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
Level 8
Level 8

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