HTML5 Fonts not rendering on Mac

[kolluax]

Hello Everyone,

We recently started offering our forms as HTML5. We upload the templates (.xdp) into AEM and then provide the rendering links to third party apps, who click it and launch the HTML form. We use some custom fonts on these forms while designing the XDP. For example customerfonts.ttf and customerfonts-cond.ttf (condensed version of the font).

We are able to view the HTML forms perfectly on Windows machines. However, on Mac, we notice the customerfonts-cond.ttf appears everywhere we used the regular customerfonts.ttf. 

As per Adobe documentation, we made sude, the fonts are available on the server under /opt/aem/publisher/crx-quickstart/fonts directory. Also, tried Gibson font configuration but after configuring this, the fonts stopped appearing on Windows machines as well. Not sure what is causing this behavior and hence reaching out to you all.

Thanks,

Abhishek

[SantoshSai]

Hi @kolluax,

Helping you to troubleshoot your issue

1. Check Internal Font Names

Use a tool like FontTools ttx or FontForge to inspect the internal name table of both font files.

• Make sure:

  • customerfonts.ttf is labeled as CustomerFonts Regular

  • customerfonts-cond.ttf is labeled as CustomerFonts Condensed or something distinct

If both fonts declare the same family name, macOS may pick one (e.g., Condensed) for all styles.

2. Rename the Fonts if Needed

If the internal names are conflicting:

• Rename the PostScript Name, Font Family, and Full Name entries in the font metadata using FontForge or similar tools.

• Save and re-upload the corrected fonts to /crx-quickstart/fonts.

3. Check Font Configuration in AEM

If you are using the Gibson configuration (via the AEM HTML5 Forms rendering service), make sure:

• The font mapping XML or config properly differentiates between the regular and condensed variants.

• You may need to map weights and styles explicitly in your fonts.xml or other rendering config.

4. Clear Font Caches (Optional)

Sometimes macOS caches font info aggressively. Try:

sudo atsutil databases -remove
sudo atsutil server -shutdown
sudo atsutil server -ping

Hope this helps!

[konstantyn_diachenko]

Hi @kolluax ,

I found similar topics: 

- https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager-forms/installing-custom-fo...

- https://aembytes.medium.com/installing-custom-fonts-into-aem-gibson-font-manager-6427588fc005 

Try to follow suggestions from that topic.

Best regards,

Kostiantyn Diachenko.

[AmitVishwakarma]

Hi @kolluax ,

Root Cause

macOS renders fonts based on internal metadata, not just file names. If both fonts declare the same “Font Family Name”, macOS will override one with the other — typically the Condensed version.

Try below steps:

1. Open Both Fonts in FontForge

Download and install FontForge: https://fontforge.org/en-US/downloads/

Open each .ttf file separately and do the following for each:

2. Rename Internal Font Metadata

Go to:
Element → Font Info → PS Names

Update values as follows:

For customerfonts.ttf:

Fontname: CustomerFonts-Regular

  - Family Name: CustomerFonts

  - Name for Humans (Full Name): CustomerFonts Regular

For customerfonts-cond.ttf:

  - Fontname: CustomerFontsCond-Regular

  - Family Name: CustomerFontsCond

  - Name for Humans (Full Name): CustomerFonts Condensed

Then go to:
File → Generate Fonts → TrueType (.ttf)

Save the updated fonts.

3. Upload to AEM Font Directory

On AEM SDK / Local:

Place fonts here:

/opt/aem/publish/crx-quickstart/fonts/

On AEM as a Cloud Service:

Use a JCR-safe path:

/apps/fonts/customerfonts-regular.ttf  
/apps/fonts/customerfonts-condensed.ttf

You can deploy via content package.

4. Create fonts.xml (Optional but Best Practice)

Path: /apps/fonts/fonts.xml

<?xml version="1.0" encoding="UTF-8"?>
<fonts>
  <font name="CustomerFonts" weight="normal" style="normal" path="/apps/fonts/customerfonts-regular.ttf"/>
  <font name="CustomerFontsCond" weight="normal" style="condensed" path="/apps/fonts/customerfonts-condensed.ttf"/>
</fonts>

5. Update Form Rendering Font Mapping (Optional)

If using the AEM HTML5 Forms service config, ensure the fonts.xml is referenced in your OSGi settings:

{
  "fontDir": "/apps/fonts",
  "fontConfig": "/apps/fonts/fonts.xml"
}

6. Flush Font Cache on macOS (Optional for Testing)

If fonts are cached on the Mac:

sudo atsutil databases -remove
sudo atsutil server -shutdown
sudo atsutil server -ping

Regards,
Amit

[kolluax]

Thanks everyone, I will try your suggestions and get back in a day or two with more details hopefully with a solution. 

Regards,

Abhishek

[kolluax]

Hi @AmitVishwakarma @SantoshSai  - Could you please elaborate more on the fonts.xml approach ? i am using a custom render profile for my HTML5 forms, where i have added a download and fill button to provide ability for the users to download the partially completed forms as PDF and proceed offline. 

I believe the entire CSS is flowing from the XDP template, as i see font related CSS is being stored under JCR node, i am trying to understand how i could overlay this CSS and instruct the renderer to pick up fonts from /apps ? 

Thanks,

Abhishek

[aanchal-sikka]

@kolluax Did you find the suggestions helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!

[kolluax]

Hi everyone, 

I have tried using the fontforge and change the font family names within custom fonts, i put a logger on gibson font manager service, i converted the fonts from .ttf to .otf, could see the fonts being picked up by the server. I used an emulator to render the form on Mac and Safari, i noticed the fonts changed and it showed custom fonts but still not the entire form picked up the fonts. But if i change the font from the developer tools, i am able to view the form in expected fonts, not sure what is missing. 

I will continue trying out other approaches and will update here.

Thanks,

Abhishek

[kolluax]

Hi All,

Update i have is it is not working even on windows if the custom fonts are not available. I had those custom fonts under C:/windows so it was working for me. Seems like a problem with Browser not able to find the fonts, i have tried uploading the fonts to /apps and added a css.txt defining the fonts and their path, then imported the client libraries on html.jsp which is responsible for rendering the form. Though it still says CustomFont we know that it is not really the font. I am working with Adobe support as well but if anyone have any other ways to try, please let us know.

Thanks,

Abhishek

[kolluax]

Hello everyone, 

I had an update from the Adobe support team, seems that this an issue with their font provider. They have come up with a fix which would be released around November. In case anyone ran into similar issue, please reach out to the Adobe team and get the hot fix. Thanks again for everyone who chimed in to help.

Regards

Abhishek