Installing custom fonts to use in theme editor

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

Thanks  ajila_aem I didn't know about that!

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?

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