Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

How add custom font in etc/design/clientlibs folder

Avatar

Avatar
Ignite 1
Level 1
ajeemaww9196509
Level 1

Likes

0 likes

Total Posts

11 posts

Correct Reply

0 solutions
Top badges earned
Ignite 1
Give Back
View profile

Avatar
Ignite 1
Level 1
ajeemaww9196509
Level 1

Likes

0 likes

Total Posts

11 posts

Correct Reply

0 solutions
Top badges earned
Ignite 1
Give Back
View profile
ajeemaww9196509
Level 1

26-04-2020

 
font

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

621 likes

Total Posts

595 posts

Correct Reply

234 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

621 likes

Total Posts

595 posts

Correct Reply

234 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile
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)

Avatar

Avatar
Establish
MVP
Ravi_Pampana
MVP

Likes

190 likes

Total Posts

239 posts

Correct Reply

74 solutions
Top badges earned
Establish
Contributor
Shape 1
Ignite 5
Ignite 3
View profile

Avatar
Establish
MVP
Ravi_Pampana
MVP

Likes

190 likes

Total Posts

239 posts

Correct Reply

74 solutions
Top badges earned
Establish
Contributor
Shape 1
Ignite 5
Ignite 3
View profile
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