Changing the font on the interface

You can change the font displayed in AEM Forms workspace. Fonts used in a specific section of the user interface are defined in the corresponding section of the style sheet. You can change the fonts on the user interface selectively.

Follow the Generic steps for AEM Forms workspace customization and depending on your requirements, follow the steps for customizing CSS, HTML, or both.

  1. Change or add the font-family in an existing style.
  2. Change or add the font-family inline for the HTML element.
  3. Add a style and use it for the HTML element.

As an example, to change the font of the top navigation bar anchor text to Courier New, follow these steps:

  1. Log in to CRXDE Lite by accessing https://[server]:[port]/lc/crx/de/index.jsp.

  2. Do one of the following:

    1. To change the font-family in an existing style, add the following in the newStyle.css file at /apps/ws/css.

      #topnav a {
         font-family: "Courier New";
      }
      
    2. To add the font-family inline for the HTML element, copy the /libs/ws/js/runtime/templates/appnavigation.html file to /apps/ws/js/runtime/templates/appnavigation.html.

      Update the /apps/ws/js/runtime/templates/appnavigation.html file as follows:

      <li class="process"><a href="#" title="<%= $.t('index.header.topnav.startprocess.detail')%>" style="font-family:Courier New;" ><%= $.t('index.header.topnav.startprocess.name')%></a></li>
      <li class="todo"><a href="#/todo" title="<%= $.t('index.header.topnav.todo.detail')%>" style="font-family:Courier New;" ><%= $.t('index.header.topnav.todo.name')%></a></li>
      <li class="track"><a href="#/tracking" title="<%= $.t('index.header.topnav.tracking.detail')%>" style="font-family:Courier New;" ><%= $.t('index.header.topnav.tracking.name')%></a></li>
      <li class="preference"><a href="#/preferences" title="<%= $.t('index.header.topnav.preferences.detail')%>" style="font-family:Courier New;" ><%= $.t('index.header.topnav.preferences.name')%></a></li>
      

      Open the /apps/ws/js/registry.js file for editing and replace text!/lc/libs/ws/js/runtime/templates/appnavigation.html with text!/lc/apps/ws/js/runtime/templates/appnavigation.html.

    3. To add a style defining the font-family, add the following in the newStyle.css file at /apps/ws/css.

      .myNewFontStyle a {
         font-family: "Courier New";
      }
      

      To add the font-family inline for the HTML element, add the following in the appnavigation.html file at /apps/ws/js/runtime/templates.

      <div id="topnav" class="myNewFontStyle">
          <ul>
              <li class="process"><a href="#" title="<%= $.t('index.header.topnav.startprocess.detail')%>" ><%= $.t('index.header.topnav.startprocess.name')%></a></li>
              <li class="todo"><a href="#/todo" title="<%= $.t('index.header.topnav.todo.detail')%>"><%= $.t('index.header.topnav.todo.name')%></a></li>
              <li class="track"><a href="#/tracking" title="<%= $.t('index.header.topnav.tracking.detail')%>" ><%= $.t('index.header.topnav.tracking.name')%></a></li>
              <li class="preference"><a href="#/preferences" title="<%= $.t('index.header.topnav.preferences.detail')%>" ><%= $.t('index.header.topnav.preferences.name')%></a></li>
          </ul>
      </div>
      
  3. Relaunch the workspace and clear the browser cache for the changes to be visible.

change_font_before
Figure: Top navigation bar before font customization

change_font_after
Figure: Top navigation bar after font customization of first tab

On this page

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now