HTML5 Fonts not rendering on Mac | Community
Skip to main content
K
kolluax
Level 3
May 6, 2025

HTML5 Fonts not rendering on Mac

  • May 6, 2025
  • 4 replies
  • 1115 views

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

4 replies

SantoshSai
Community Advisor
SantoshSaiCommunity Advisor
Community Advisor
May 6, 2025

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!

Santosh Sai
    konstantyn_diachenko
    Community Advisor
    konstantyn_diachenkoCommunity Advisor
    Community Advisor
    May 6, 2025

    Hi @kolluax ,

     

    I found similar topics: 

    - https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager-forms/installing-custom-fonts-to-use-in-theme-editor/m-p/576781

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

     

    Try to follow suggestions from that topic.

     

    Best regards,

    Kostiantyn Diachenko.

    Kostiantyn Diachenko, Community Advisor, Certified Senior AEM Developer, creator of free AEM VLT Tool, maintainer of AEM Tools plugin.
    AmitVishwakarma
    Community Advisor
    AmitVishwakarmaCommunity Advisor
    Community Advisor
    May 7, 2025

    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

    K
    kolluaxAuthor
    Level 3
    May 12, 2025

    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
    Community Advisor
    aanchal-sikkaCommunity Advisor
    Community Advisor
    May 12, 2025

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

    Aanchal Sikka
    K
    kolluaxAuthor
    Level 3
    May 13, 2025

    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

      K
      kolluaxAuthor
      Level 3
      May 15, 2025

      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

       

        Terms & ConditionsAccessibility statement

        Loading footer...