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

SOLVED

Installing custom fonts to use in theme editor

deepakt84913413
Level 4
Level 4

How do I install a custom font to include it in AEM forms? The font is call PNC Sans.

1 Accepted Solution
ajila_aem
Correct answer by
Level 2
Level 2

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 solution in original post

5 Replies
James_R_Green
Level 7
Level 7

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

ajila_aem
Correct answer by
Level 2
Level 2

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 solution in original post

deepakt84913413
Level 4
Level 4

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,

1435205_pastedImage_0.png

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

ajila_aem
Level 2
Level 2

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". ​