Using 3rd party CSS in designs | Community
Skip to main content
A
Anthony_McLin
October 16, 2015
Solved

Using 3rd party CSS in designs

  • October 16, 2015
  • 6 replies
  • 1674 views

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?

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Best answer by JustinEd3

    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

    6 replies

    smacdonald2008
    smacdonald2008
    October 16, 2015

    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. 

    J
    Adobe Employee
    JustinEd3Adobe EmployeeAccepted solution
    Adobe Employee
    October 16, 2015

    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

      A
      Anthony_McLinAuthor
      October 16, 2015

      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
        Yogesh_Upadhyay
        October 16, 2015

        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

          A
          Anthony_McLinAuthor
          October 16, 2015

          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
            Scott_Brodersen
            October 16, 2015

            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

            Terms & ConditionsAccessibility statement

            Loading footer...