Installing custom fonts to use in theme editor

[deepakt84913413]

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

[James_R_Green]

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 · Accepted solution]

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.

[James_R_Green]

Thanks  ajila_aem I didn't know about that!

[deepakt84913413]

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?

[ajila_aem]

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

[Vinit_Pillai]

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.