Clientlibs not loading the fonts when placed in apps

Avatar

Avatar

prajwalreddy

Avatar

prajwalreddy

prajwalreddy

30-04-2018

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?

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar

wimsymons

Avatar

wimsymons

wimsymons

02-05-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#LocatingaClien... and https://github.com/Adobe-Marketing-Cloud/aem-project-archetype/issues/63#issuecomment-334400884, you should place your font in a "resources" subdirectory.

Answers (10)

Answers (10)

Avatar

Avatar

wimsymons

Avatar

wimsymons

wimsymons

02-05-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

Avatar

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Reply

2.3K

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Reply

2.3K
smacdonald2008

30-04-2018

IN AEM 6.4 - not recommended to use /etc - but back to /apps or other folder.

Adobe Experience Manager Help | Repository Restructuring in AEM 6.4

Avatar

Avatar

Rima_Mittal

Avatar

Rima_Mittal

Rima_Mittal

30-04-2018

you should ideally 'embed' all clientlibs located under /apps in some parent clientlibs under /etc.

That should solve your problem.

Hope this helps!

Avatar

Avatar

Karl515

Avatar

Karl515

Karl515

26-01-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!

Avatar

Avatar

sivas61374651

Avatar

sivas61374651

sivas61374651

20-08-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

Avatar

Avatar

prajwalreddy

Avatar

prajwalreddy

prajwalreddy

02-05-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.

Avatar

Avatar

prajwalreddy

Avatar

prajwalreddy

prajwalreddy

02-05-2018

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

Avatar

Avatar

prajwalreddy

Avatar

prajwalreddy

prajwalreddy

01-05-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.

Avatar

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Reply

2.3K

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Reply

2.3K
smacdonald2008

01-05-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

clientlibs3.png

Avatar

Avatar

wimsymons

Avatar

wimsymons

wimsymons

01-05-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?