How add custom font in etc/design/clientlibs folder | Community
Skip to main content
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 BrianKasingli

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.

2 replies

Ravi_Pampana
Community Advisor
Ravi_PampanaCommunity Advisor
Community Advisor
April 26, 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

    BrianKasingli
    Community Advisor and Adobe Champion
    BrianKasingliCommunity Advisor and Adobe ChampionAccepted solution
    Community Advisor and Adobe Champion
    April 26, 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.

      Terms & ConditionsAccessibility statement

      Loading footer...