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 でのフォントレンダリングの問題を解決するには、次の手順に従います。

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

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

code language-none

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; }

@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 フォントを参照します。

カスタムプロファイルに次の clientlib が含まれていることを確認します。
xfaforms.loadingProfile.loadingPage
xfaforms.3rdparty、xfaforms.xfalib、xfaforms.toolbar、xfaforms.scrollnav

カスタムプロファイルで allowProxy を true に設定します。
– 次の clientlibs 行を formRuntime.jsp に含めます。

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

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

'/apps/hrform'

"`
└── demo
├── formRuntime.jsp
├── html.jsp
└── loadingProfile
├── css
└── css.txt
├── javascript
└── js.txt
└── resources
└── fonts
├──
├──
├──

├──
└──
├──
└──
└──
└──
├──
├──
├──
└──

CharlesCharlesModern-Modern-Bold-Bold.woffCharles modern-BoldItalic.woffCharlesCharlesModern-Cond.woffHierarchy for code package:code'/apps/Codebase/customclientlib''''Modern-BoldItalic.woffChargemBoldItalic.woffChargemBoldCond.woffChargemBoldCond.woffHierarchy for code package

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

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

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