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

[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!