Accepted Solutions (1)

Accepted Solutions (1)

ajila_aem

06-03-2018

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.

Answers (4)

Answers (4)

James_R_Green

01-03-2018

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

06-03-2018

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

deepakt84913413

06-03-2018

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?