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 in project

Avatar

Avatar
Ignite 5
Level 2
sagrawal
Level 2

Likes

3 likes

Total Posts

29 posts

Correct Reply

0 solutions
Top badges earned
Ignite 5
Ignite 3
Ignite 1
Give Back 3
Give Back
View profile

Avatar
Ignite 5
Level 2
sagrawal
Level 2

Likes

3 likes

Total Posts

29 posts

Correct Reply

0 solutions
Top badges earned
Ignite 5
Ignite 3
Ignite 1
Give Back 3
Give Back
View profile
sagrawal
Level 2

19-09-2020

How to add font files  in project folder. I create fonts folder but not getting an option of copying font file or even file drag an drop option. 


 
fonts.PNG

 

 

Please guide me how to add font files.

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Validate 1
MVP
raj_mandalapu
MVP

Likes

124 likes

Total Posts

203 posts

Correct Reply

72 solutions
Top badges earned
Validate 1
Contributor
Shape 1
Give Back 5
Give Back 3
View profile

Avatar
Validate 1
MVP
raj_mandalapu
MVP

Likes

124 likes

Total Posts

203 posts

Correct Reply

72 solutions
Top badges earned
Validate 1
Contributor
Shape 1
Give Back 5
Give Back 3
View profile
raj_mandalapu
MVP

19-09-2020

First, the location of the fonts folder which you placed needs to change, you need to place your fonts under the resources folder, the resource folder should be under clientlibs

You can refer weretail:

 
 

temp.png

Sample code:

  font-family: SlatePro-Bk;

  src: url("../resources/fonts/we-icons.1.0.0.woff") format("woff");

}

you can either use the Maven project to import fonts files to AEM or a temporary solution is export clientlib as package and add font files then import it to AEM.

 

 

Answers (2)

Answers (2)

Avatar

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

610 likes

Total Posts

588 posts

Correct Reply

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

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

610 likes

Total Posts

588 posts

Correct Reply

230 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile
BrianKasingli
MVP

23-09-2020

@sagrawal,

You can create a resources folder within your client library so that you store static assets, your font files. Your font files can then be accessed via the client library proxy URL within your style sheet. For some code, samples check out this blog article here - https://sourcedcode.com/blog/aem/3-different-ways-to-embed-custom-fonts-in-aem-sites

Avatar

Avatar
Validate 1
MVP
Nikhil-Kumar
MVP

Likes

243 likes

Total Posts

256 posts

Correct Reply

38 solutions
Top badges earned
Validate 1
Ignite 3
Ignite 1
Give Back 5
Give Back 3
View profile

Avatar
Validate 1
MVP
Nikhil-Kumar
MVP

Likes

243 likes

Total Posts

256 posts

Correct Reply

38 solutions
Top badges earned
Validate 1
Ignite 3
Ignite 1
Give Back 5
Give Back 3
View profile
Nikhil-Kumar
MVP

19-09-2020

@sagrawal 

You can create a new file with specific extension or you can add it as part code maven build, which will deploy the code to AEM crx.

Thanks,
Nikhil