How add custom font in etc/design/clientlibs folder

[Ravi_Pampana]

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

[BrianKasingli · Accepted solution]

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.