Accepted Solutions (1)

Accepted Solutions (1)

Briankasingli

MVP

26-04-2020

Hello @ajeemaww9196509,

If you wish to serve static files from your AEM websites such as fonts and/or images (structural images like icons, background patterns, etc...), then you can:

  1. Create a new client library with all its structural requirements under the /apps/my-site/clientlibs/clientlib-site; ensure allowProxy is enabled so that /etc.clientlibs/my-site/clientlibs/clientlib-site.js|css can be accessed. Note: It's best practice to keep your site-specific client libraries in the /apps folder.
  2. Create a folder named of resources under the folder, example like: /apps/my-site/clientlibs/clientlib-site/resources.
  3. add your font file in the resources folder, example like: /apps/my-site/clientlibs/clientlib-site/resources/myfont.woff. 
  4. Once the installation setup is complete, you can call the font from your CSS file like this:
@font-face {
  font-family: "my-font";
  src: url("/etc.clientlibs/my-site/clientlibs/clientlib-site/resources/myfont.woff") format("truetype");
}

If you wish to further understand how client libraries are created and all its features, be sure to check out these two blogs from sgaemsolutions:

  1. Client Library Tutorial #1 - http://www.sgaemsolutions.com/2017/06/clientlibs-in-aem-63-part1.html
  2. Client Library Tutorial #2 - http://www.sgaemsolutions.com/2017/06/clientlibs-in-aem63-part2_25.html

I hope this helps.

Answers (1)

Answers (1)

Ravi_Pampana

MVP

26-04-2020

As per adobe, it is recommended to locate client libraries under /apps and expose them via /etc.clientlibs by leveraging the allowProxy property.

 

We can add the fonts under resources folder and access them with full path by replacing /apps with /etc.clientlibs after adding allowProxy property to the clientlibs node

 

Refer: https://docs.adobe.com/content/help/en/experience-manager-65/developing/introduction/clientlibs.html for more details