Clientlibs not loading the fonts when placed in apps | Community
Skip to main content
P
prajwalreddy
New Participant
April 30, 2018
Solved

Clientlibs not loading the fonts when placed in apps

  • April 30, 2018
  • 12 replies
  • 12456 views

We have included the fonts using below syntax

@font-face {

  font-family: SlatePro-Bk;

  src: url("../css/fonts/SlatePro-Bk.woff") format("woff");

}

Font file is placed in apps/{project-folder}/clientlibs/{client-libraryfolder}/css/fonts/SlatePro-Bk.woff.

Fonts are not loaded it gives 404 error when the clientlib is rendered from apps using allowproxy= true. It is working fine when we move the clientlibraries to /etc/clientlibs.

Is this expected ? If yes, Do we have any other way to include the fonts/images in the clientlibrary?

    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 wimsymonsvrt

    No I don't prajwalreddy​. I was trying to get Adobe staff to tell us something useful. But it appears smacdonald2008​ also dodged the question . But if I read https://helpx.adobe.com/experience-manager/6-3/sites/developing/using/clientlibs.html#LocatingaClientLibraryFolderandUsingtheProxyClientLibrariesServlet and https://github.com/Adobe-Marketing-Cloud/aem-project-archetype/issues/63#issuecomment-334400884, you should place your font in a "resources" subdirectory.

    12 replies

    N
    nick-sif
    New Participant
    March 3, 2022

    So for those wondering, a 'resources directory' is just a directory called resources, which sits inside your clientlibs folder along with your /js and /css folders

     

    /apps/my-app/clientlibs/my-app-lib/resources

     

    Tested this on 6.5 and it works. Kinda weird behaviour but OK AEM you do you

    Karl515
    Karl515
    New Participant
    January 26, 2019

    For those who are still wondering. Just place your fonts under resources folder with clientlibs allowed proxy and you should be fine. It works for me. cheers!

    S
    sivas61374651
    New Participant
    August 20, 2018

    Hi Wimsymons,

    What do you mean by static resource? i'm struck up the same issue where you were. In my case I'm having the below structure,

    1) /apps/myapp/clientlibs/samplelibone

    2) /apps/myapp/clientlibs/samplelibtwo

    under the above two folders i'm having some css & js. So, here I should move the samplelibone & samplelibtwo under resources directory? something like this /apps/myapp/clientlibs/resources/samplelibone? Appreciate your help.

    prajwalreddy​

    Thanks,

    Vijay

    W
    wimsymonsvrt
    New Participant
    May 2, 2018

    But I do think that the sentence "A static resource can only be accessed via the proxy, if it resides below a resource below the client library folder." should be rephrased as "A static resource can only be accessed via the proxy, if it resides below a 'resources' directory below the client library folder." /cc smacdonald2008​

      P
      prajwalreddyAuthor
      New Participant
      May 2, 2018

      @winsymons - Yes..you got it right if we place the files in resources directory. It is working fine. We also just found it out.

      W
      wimsymonsvrtAccepted solution
      New Participant
      May 2, 2018

      No I don't prajwalreddy​. I was trying to get Adobe staff to tell us something useful. But it appears smacdonald2008​ also dodged the question . But if I read https://helpx.adobe.com/experience-manager/6-3/sites/developing/using/clientlibs.html#LocatingaClientLibraryFolderandUsingtheProxyClientLibrariesServlet and https://github.com/Adobe-Marketing-Cloud/aem-project-archetype/issues/63#issuecomment-334400884, you should place your font in a "resources" subdirectory.

        P
        prajwalreddyAuthor
        New Participant
        May 2, 2018

        Hi.. do you have any solution to the issue that was mentioned?

        P
        prajwalreddyAuthor
        New Participant
        May 2, 2018

        Thanks for response Rima!!

        We have currently working with a workaround of having clientlibs in /etc with which it is working fine. However, Adobe suggests to load project specific clientlibs in /apps . So ideally with allowproxy property even there shouldn't be any issue correct. So wanted to check if there is any fix available for this issue.

        smacdonald2008
        smacdonald2008
        New Participant
        May 1, 2018

        In AEM 6.4 - /etc is not considered best practice. Even when you create a Maven 13 generated project - notice that Clientlibs folder is placed under /apps.

        ie -- where QueryJCR64 is under /apps

        W
        wimsymonsvrt
        New Participant
        May 1, 2018

        I guess the real question is where to put assets like your web fonts in AEM 6.4 and above.

        /apps has always been blocked by the dispatcher and /etc/clientlibs was not. That is why this construction used to work.

        But as /etc becomes a no-go zone, and you have to put your website design in /apps, these resources become unavailable without opening /apps in your dispatcher config. But this is a security issue. You should never open up /apps in your dispatcher configuration.

        Is the best action to open a specific part of your /apps structure where these resources are stored, or should we refer to these resources through the proxy servlet /etc.clientlibs?

        Show more replies
        Terms & ConditionsAccessibility statement

        Loading footer...