Installing custom fonts to use in theme editor | 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.
ajila_aemAccepted solution
Level 2
Mar 6, 2018 10:26 AM UTC

In order to have a Font available in AEM 6.3 Forms, you need to do two steps:

1. Make the font known to AEM by providing the path to it: go to http://[server]:[port_number]/system/console/configMgr​ and edit "CQ-DAM-Handler-Gibson Font Manager Service". Add the path to your font library (e.g. "/Library/Fonts" under macOS). Alternatively, you can add the font to "[AEM Install Dir]/crx-quickstart/fonts".

2. Next, edit "Adaptive Form Theme Configuration Service". Add a new entry for each font you want to use. Make sure the Spelling of the official font name is correct, replacing spaces with "\ " (backslash and space).

3. Restart your server and now you should be able to select the font in the Theme or Form editor.

View reply

6 replies

ajila_aem
Level 2
Mar 6, 2018 4:19 PM UTC

Hi deepakt84913413​,

if you add the font to crx-quickstart/fonts, you do not need to add a specific folder at all since that location is included by default. I tested by putting an .otf font inside crx-quickstart/fonts and checked the error.log file to make sure the font location was picked up:

06.03.2018 09:31:11.513 *INFO* [CM Event Dispatcher (Fire ConfigurationEvent: pid=com.day.cq.dam.handler.gibson.fontmanager.impl.FontManagerServiceImpl)] com.day.cq.dam.handler.gibson.fontmanager.impl.FontManagerServiceImpl Using following directories for looking up fonts. Adobe Font Dir = /.../AEM Install Directory/crx-quickstart/fonts, Customer Font Dir = /Users/your_username/Library/Fonts,System Font Dir = /Library/Fonts

Only if you have other locations you would like to include, you specify them, e.g. on a Mac you would use "/Library/Fonts" for "System Fonts Directory" and "/Users/your_username/Library/Fonts" for "Customer Fonts Directory".

This setup is outlined in Installing and configuring AEM 6.3 forms​, section "(Optional) Configure fonts manager service".

For the integration into the AEM Theme / Forms designer, see Adobe Experience Manager Help | Themes in AEM Forms​, section "Listing and selecting fonts in theme editor". ​

Translate
Vinit_Pillai
Level 3
Mar 1, 2023 12:52 PM UTC

Hi @ajila_aem  ,
I have followed the link and I have added system fonts.
I can see the name of my font in com.day.cq.dam.handler.gibson.fontmanager.impl.FontManagerServiceImpl logs.
But I am unable to find it while editing font-family in Forms theme.
I also tried adding custom font name in

Adaptive Form and Interactive Communication Web Channel Theme Configuration.name

config and the custom font appears in the list but the style is Times New Roman.

Translate
deepakt84913413
deepakt84913413Author
Level 4
Mar 6, 2018 2:59 PM UTC

Hi ajila_aem​,

Thank you so much for the information. If I am adding the font in the crx-quickstart/fonts, Is there a folder structure I need to follow separately for windows and mac OS fonts?
Secondly, In the picture below,

Should I be adding the fonts location in "System Fonts directory" or "Customer Fonts directory"? Could you help me out with an example please?

Translate
James_R_Green
James_R_Green
Level 6
Mar 6, 2018 10:29 AM UTC

Thanks  ajila_aem I didn't know about that!

Translate
ajila_aemAccepted solution
Level 2
Mar 6, 2018 10:26 AM UTC

In order to have a Font available in AEM 6.3 Forms, you need to do two steps:

1. Make the font known to AEM by providing the path to it: go to http://[server]:[port_number]/system/console/configMgr​ and edit "CQ-DAM-Handler-Gibson Font Manager Service". Add the path to your font library (e.g. "/Library/Fonts" under macOS). Alternatively, you can add the font to "[AEM Install Dir]/crx-quickstart/fonts".

2. Next, edit "Adaptive Form Theme Configuration Service". Add a new entry for each font you want to use. Make sure the Spelling of the official font name is correct, replacing spaces with "\ " (backslash and space).

3. Restart your server and now you should be able to select the font in the Theme or Form editor.

Translate
    James_R_Green
    James_R_Green
    Level 6
    Mar 2, 2018 12:45 AM UTC

    deepakt84913413​

    There is only the option to use Adobe TypeKit fonts in themes (see Adobe Experience Manager Help | Themes in AEM Forms "Using web fonts in a theme"). Your font isn't a TypeKit font though.

    As far as I am aware you can't install a custom font via the theme editor.

    The reason being, you need to define a font in CSS will two steps:

    1)

    @font-face {
      font    -family: 'YourFontName'; /*a name to be used later*/
      src    : url('path/font.ttf'); /*URL to font*/
    }

    2)

    Then you can use the font family on an element:

    .classname {
        font    -family: 'YourFontName';
    }

    You can do step 2 in the theme editor, with CSS overrides, but you can't do step 1.

    You can do this with a client library however. You could store your font in etc/designs/<project>/fonts and reference that as that as your src: url.

    Have a read of this article and do step 1 and 2 (the rest isn't applicable to this scenario)

    AEM Client Libraries explained by example

    Once created you would just specify your clientlibrary category on the form (adaptive form container - basic settings) and the css in your clientlib will be used.

    Thanks,

    James

    Translate
      Terms & ConditionsAccessibility statement

      Loading footer...