51ºÚÁϲ»´òìÈ

Documentation

Fonts not rendering correctly in AEM 6.5 HTML5 forms

Last update: Mon Sep 22 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

When rendering XDP templates as HTML5 forms in AEM 6.5 Forms, fonts can fail to display correctly—especially on machines without the required fonts installed locally. Even if the fonts exist in the CRX repository, the issue persists due to compatibility and configuration gaps. To fix this, use web fonts, configure a custom rendering profile, and validate the setup across environments.

Description description

Environment

Product:  51ºÚÁϲ»´òìÈ Experience Manager - Forms (AEM - Forms)
Version: Ìý6.5
Deployment: Ìý´Ç²Ô-±è°ù±ð³¾¾±²õ±ð²õ
Component:  HTML5 forms rendering

Issue/Symptoms

  • Fonts don’t render correctly in HTML5 forms generated from XDP templates.
  • The issue occurs even when fonts are available in the CRX repository.
  • Fonts display correctly only on machines where they’re installed locally.
  • Gibson Font Manager configuration doesn’t resolve the issue.

Resolution resolution

To resolve font rendering issues in HTML5 forms, follow these steps:

  1. TrueType fonts aren’t compatible with HTML5 rendering. Use web-compatible fonts like .woff. Then push these fonts to CRX via your code project or package.

  2. Create a custom profile for rendering HTML5 forms using the instructions from Creating a custom profile for HTML5 forms in the AEM 6.5 User Guide.

    code language-none 
    @font-face {
      font-family: 'Charles Modern';
      src: url( /en/docs/experience-cloud-kcs/kbarticles/resources/fonts/CharlesModern-Bold.woff') format('woff ); /* add bold font here */
      font-style: normal;
      font-weight: bold;
    }

    @font-face {
      font-family: 'Charles Modern';
      src: url( /en/docs/experience-cloud-kcs/kbarticles/resources/fonts/CharlesModern-Regular.woff') format('woff );
      font-style: normal;
      font-weight: normal;
    }

    @font-face {
      font-family: 'Charles Modern';
      src: url( /en/docs/experience-cloud-kcs/kbarticles/resources/fonts/CharlesModern-CondBold.woff') format('woff ); /* add italics font here */
      font-style: italic;
      font-weight: bold;
    }

    • Reference the fonts in your renderer profile configuration using @font-face CSS rules, like in this sample:

    • Ensure your custom profile includes these clientlibs:

      • xfaforms.loadingProfile.loadingPage
      • xfaforms.3rdparty,Ìýxfaforms.xfalib,Ìýxfaforms.toolbar,Ìýxfaforms.scrollnav

    • ³§±ð³ÙÌýallowProxyÌý³Ù´ÇÌý true  in your custom profile.

    • Include the following clientlibs lines in formRuntime.jsp:

      code language-none 
      <ui:includeClientLib categories="${xfaLocale},xfaforms.loadingProfile.loadingPage" />
<ui:includeClientLib categories="Codebase.customfunctionscategory" />
    code language-none 
     Hierarchy for custom profile:



 `/apps/hrform`


 ```
 └── demo
     ├── formRuntime.jsp
     ├── html.jsp
     └── loadingProfile
           ├── css
           └── css.txt
         ├── javascript
           └── js.txt
         └── resources
         └── fonts
                ├── CharlesModern-Bold.woff
             ├── CharlesModern-BoldItalic.woff
             ├── CharlesModern-Cond.woff
 ```
    code language-none 
     Hierarchy for code package:



 `/apps/Codebase/customclientlib`


 ```
 ├── css
         └── css.txt
     ├── js
          └── js.txt
     └── resources
         └── fonts
             ├── CharlesModern-Bold.woff
                         ├── CharlesModern-BoldItalic.woff
             ├── CharlesModern-Cond.woff
                         └── CharlesModern-CondBold.woff
 ```

Then restart AEM after deploying the fonts and updating configurations.

Test form rendering across Windows and Mac environments and different browsers. Use your custom profile URL similar to:

  • http://host:port/content/xfaforms/profiles/hrform.html?contentRoot=crx:///content/dam/formsanddocuments/sample-form&template=sample-form.xdp
recommendation-more-help
3d58f420-19b5-47a0-a122-5c9dab55ec7f