Custom Fonts in AEM Core Components | Community
Skip to main content
Hars_hitSingh
Level 2
Sep 13, 2023 12:14 PM UTC
Solved

Custom Fonts in AEM Core Components

Hello,

 

We are using AEM Cloud Service for our client demo. It's a single page using template and components from https://github.com/adobe/aem-site-template-standard which uses AEM core components. We don't have any customized project setup or client libraries for this. The only requirement we have is to use client fonts. We have the font files with us in ".ttf" and ".otf" filetypes.

 

My question is, is it possible to use custom fonts in AEM core components, and if yes, how can we do that? Currently, all components are taking default fonts.

 

Thanks in advance,

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Mahedi_Sabuj
Mahedi_SabujAccepted solution
New Participant
Sep 13, 2023 12:50 PM UTC

To customize fonts in the AEM Site Template Standard, you should build it locally using the steps outlined here.
https://github.com/adobe/aem-site-template-standard/#build-locally.

To change the font, you can modify the font-family source and incorporate your preferred client font. You can find the necessary code here. https://github.com/adobe/aem-site-template-standard/blob/main/theme/src/site/_fonts.scss.

Mahedi Sabuj

3 replies

kautuk_sahni
Employee
Sep 14, 2023 11:57 AM UTC

@hars_hitsingh  Do you find the suggestion from Mahedi useful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. 

Translate
Kautuk Sahni
Hars_hitSingh
Level 2
Sep 14, 2023 12:04 PM UTC

@mahedi_sabuj , Thanks for your answer, it helped. 🙂

 

Yes, @kautuk_sahni !!
I marked the answer as the correct reply.

Translate
Mahedi_Sabuj
Mahedi_SabujAccepted solution
New Participant
Sep 13, 2023 12:50 PM UTC

To customize fonts in the AEM Site Template Standard, you should build it locally using the steps outlined here.
https://github.com/adobe/aem-site-template-standard/#build-locally.

To change the font, you can modify the font-family source and incorporate your preferred client font. You can find the necessary code here. https://github.com/adobe/aem-site-template-standard/blob/main/theme/src/site/_fonts.scss.

Translate
Mahedi Sabuj