How do I install a custom font to include it in AEM forms? The font is call PNC Sans.
Solved! Go to 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.
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
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.
Thanks ajila_aem I didn't know about that!
Views
Replies
Total Likes
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?
Views
Replies
Total Likes
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".
Views
Replies
Total Likes
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.
Views
Replies
Total Likes
Views
Likes
Replies