ドキュメント

AEM 6.5 HTML5 forms でフォントが正しくレンダリングされない

Last update: Tue Oct 14 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

XDP テンプレートをAEM 6.5 FormsのHTML5 フォームとしてレンダリングする場合、必要なフォントがローカルにインストールされていないマシンでは特に、フォントが正しく表示されない場合があります。 CRX リポジトリにフォントが存在する場合でも、互換性と設定のギャップが原因で問題が解決しない。 これを修正するには、web フォントを使用し、カスタムレンダリングプロファイルを設定し、環境全体で設定を検証します。

説明 description

環境


製品： Adobe Experience Manager - Forms（AEM - Forms）
バージョン： 6.5
デプロイメント： オンプレミス
コンポーネント： HTML5 Forms のレンダリング


問題/症状

  • XDP テンプレートから生成されたHTML5 フォームで、フォントが正しくレンダリングされない。
  • この問題は、CRX リポジトリーでフォントが使用できる場合でも発生します。
  • フォントは、ローカルにインストールされているマシンでのみ正しく表示されます。
  • Gibson Font Manager 設定で問題が解決しない。

解決策 resolution

HTML5 forms でのフォントレンダリングの問題を解決するには、次の手順に従います。

  1. TrueType フォントは、HTML5 レンダリングと互換性がありません。 .woff などの web 互換フォントを使用します。 次に、これらのフォントをコードプロジェクトまたはパッケージを通じてCRXにプッシュします。

  2. AEM 6.5 ユーザーガイドの HTML5 フォームのカスタムプロファイルの作成 ​ の手順を使用して、HTML5 フォームをレンダリングするためのカスタムプロファイルを作成します。

    code language-none 
    @font-face {
  font-family: 'Charles Modern';
  src: url( ../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( ../resources/fonts/CharlesModern-Regular.woff') format('woff );
  font-style: normal;
  font-weight: normal;
}

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

    • 次のサンプルのように、CSS ルールを使用してレンダラープロファイル設定 @font-face フォントを参照します。

    • カスタムプロファイルに次の clientlibs が含まれていることを確認します。

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

    • カスタムプロファイルで allowProxy を true に設定します。

    • formRuntime.jsp に次の clientlibs 行を含めます。

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

    • カスタムプロファイルの階層：

      /apps/hrform

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

    • コードパッケージの階層：

      /apps/Codebase/customclientlib

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

  3. フォントをデプロイして設定を更新した後、AEMを再起動します。

  4. Windows とMacの環境および異なるブラウザー間でフォームレンダリングをテストします。 次のようなカスタムプロファイル URL を使用します。

    code language-none 
    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