Change the font and color settings in AEM Mobile apps.

You can customize your apps by uploading fonts for use in browse page cards, app views, and HTML articles. You can also change the colors used in different app views such as the app menu, navigation bars, and sign-in prompts.

 

Using custom fonts

You can use the Fonts & App Customization section of the Portal to upload custom fonts for use in layout cards, HTML articles, and in app views such as the app menu.

To reference fonts in HTML articles. See Creating HTML articles for AEM Mobile: Using shared fonts.

  1. In the Portal, click Content & Layouts, and then click Fonts & App Customization. Select the Fonts tab.

  2. To add fonts individually, click Add > Add Font.

  3. Drag the font files into the Add Fonts section, or click the Browse button and specify the font file.

    After you drag and drop the font file, the Font Name is added automatically.

    To improve performance and reduce app size, we recommend that you limit the fonts you upload to include only the fonts you plan to use in your app.

    Adding fonts
  4. When you finish uploading fonts, specify the font when editing cards and layouts, creating HTML articles, or customizing app views.

    Choose fonts from a drop-down list
    Choosing an uploaded font while editing a layout card.

  5. Build or rebuild the custom app in order to preview the fonts.

    The AEM Preflight app does not display custom fonts. Whenever you add or edit fonts, you must build or rebuild the app in order to view the changes.

    See Previewing project content for AEM Mobile apps.

Note:

Make sure that you have the appropriate licensing to use the font in your app.

Bulk add fonts

Instead of adding fonts one at a time, you can drag and drop multiple fonts into a window.

  1. In the Fonts & App Customization section of the Portal, click Add > Bulk Add Fonts.
  2. Select the font files you want to upload in a Finder or Explorer window, and then drag and drop the selected font files onto the icon.
  3. Check the list of fonts to be uploaded. Select any font that you don't want to upload and click the minus ( – ) icon that appears. Click Upload to upload the fonts.

Device fonts and Web fonts

Only the device font is required for displaying the font in phones and tablets. However, for each font you use, we recommend that you upload both the device font (OpenType or TrueType) and the Web font (.woff). Device fonts are used in phone and tablet browse pages. Web fonts are used in the Desktop Web Viewer, in Windows apps (if the .otf or .ttf cannot be installed), and for previewing fonts in cards.

With the right font license, you should have access to the .woff version of the font. It is usually included in the package when you licensed the font. Contact the font licenser for details.

Fonts you have access to via Adobe Typekit are not available for uploading.

 

Note:

Whenever you add a new font, you must rebuild your app to make the new font available at this time.

Using fonts in Windows apps

Windows enforces font usage rules that are included in the fonts by the foundry. If the font isn’t marked as “installable” by the foundry, the Windows OS will refuse to load them. You can check to see whether the font is marked “Installable” by right-clicking it and viewing the properties. For best results, include a web version of the font (.woff) for Windows apps.

Customizing app views

You can specify different colors and fonts for various views that appear in your app, including the app Navigation Bar, the App Menu, and sign-in and paywall screens. You can also show or hide the App Menu or the Account option in the app menu, and you can always show or hide the Navigation Bar.

Note the following:

  • The App Customization preview image does not provide a completely accurate representation. Make sure that you test your app customization colors and fonts by building a custom app.
  • The color theme settings (Light Theme, Dark Theme, or Custom Theme) are global settings that apply to all views for each platform. Light Theme and Dark Theme are presets that cannot be edited. If you change any color or font setting, the theme switches to Custom.
  • Make sure that you click Save to save your work before you navigate away. Save applies only to the current platform.

App Customization video

App Customization video
This video demonstrates the new app customization features released in 2016.14 and 2017.1.

  1. In the Portal, click Content & Layouts, and then click Fonts & App Customization. Select the App Customization tab.

  2. Specify the platform (iOS or Android).

    The settings you specify apply only to the selected platform. At this time, saving customization settings is not available, so you'll need to specify app customization settings separately for iOS and Android.

  3. Select the All Screens view. To use a preset, choose Light Theme or Dark Theme. If you change color or font settings, Custom Theme is selected automatically. For custom settings, start in All Screens view, and select the color and font settings you want to use.

    When All Screens is selected, changes you make are applied to all views. You can then override custom colors and font settings for each individual view.

    Note:

    Font and color settings are associated with each theme: Light Theme, Dark Theme, and Custom Theme. When you select a different theme, the font and color settings are reset.

  4. In All Screens view, specify gesture settings for the app.

    Pinch to Zoom – Specify whether to enable or disable the pinch to zoom gesture for each type of article. If you disable this option, users cannot pinch to zoom in or out of the article view.

    • The Raster Articles option includes InDesign-based articles and PDF-based articles in which the "Fit Full Page to Screen" option is selected.
    • The PDF Articles option includes PDF-based articles in which the "Fit Full Page to Screen" option is not selected.
    • The HTML Articles option includes HTML-based articles.

    Pinch to Close (iOS only) – On iPads, you can pinch out from browse pages to go back to the previous view. Specify whether to enable or disable this gesture.

    Bezel Swipe (iOS only) – In iOS apps, you can swipe from the left side to go back to the previous view or display the App Menu from the top-level view. Specify whether to enable or disable this gesture.

  5. Select the individual app view by choosing an option from the menu or by clicking the navigation arrows, and then specify custom color settings and font settings for that individual view.

  6. To hide the App Menu or Account option, navigate to the App Menu view. Click the App Menu icon to toggle it on or off. Or, click the Sign In option to toggle the Account option on or off.

    When App Menu is turned off, the app menu cannot be displayed in the app.

    When Sign In is turned off, the "Account" option does not appear at the bottom of the App Menu.

    When the Menu Bar is hidden, you can use navto and goto formats to provide navigation links and trigger features such as Search. See Hyperlinks in AEM Mobile.

    If you hide the Sign In option (Account option in UI) or the Menu Bar, you can use HTML and Cordova JavaScript APIs to allow users to sign in and sign out. For sample code that allows a user to sign in our out using a dynamic banner, see Creating banners and dynamic banners: Dynamic banners.

  7. To change the navigation bar behavior, navigate to the App Navigation Bar view. Choose from the following options for both tablet and phone.

    Default – The Navigation Bar is displayed only when the user taps a non-interactive area of an article. The Navigation Bar hides article content while it is displayed.

    Always Visible – If you select this option, the Navigation Bar appears at the top of navigation screens and articles and cannot be hidden. When the Navigation Bar is set to always appear, content at the top of the article is not hidden. HTML articles start at the top of the screen below the Navigation Bar. Fixed-layout articles are scaled down and letterboxed.

    When the Navigation Bar is set to Always Visible, fixed layout content is scaled down and latterboxed.

    Always Hidden – If you select this option, the Navigation Bar and Status Bar are disabled and hidden. When the Navigation Bar is hidden, you can use navto and goto formats in articles to provide navigation links and to trigger features such as the Back button and Social Sharing options. See Hyperlinks in AEM Mobile.

    Status Bar visible and Navigation Bar hidden – If you select this option, the Navigation Bar is disabled and hidden, and the Status Bar is always displayed. Article content is displayed below the Status Bar and scaled and letterboxed if necessary.

  8. Click Save to save the settings for the current platform.

    Clicking Save saves the settings for the current platform. If you're working on both iOS and Android platforms at the same time, make sure that you click Save for each platform.

  9. Build or rebuild the custom app in order to view the custom app settings.

    Uploaded fonts and custom app settings are built into the app. Whenever you upload new fonts or change app customization settings, you need to rebuild your app in order to view changes.

    The AEM Preflight app does not display app customization settings.

    See Previewing project content for AEM Mobile apps.

Additional app customization methods

In addition to using the Fonts & App Customization section of the Portal, you can also make other customization changes.

  • In project settings, you can specify a brand image that appears in the app menu.
  • When building the app, you can determine whether the phone is dual-orientation (iOS), portrait-only, or landscape-only. For iOS and Android apps, you can also determine whether the app works on phones, tablets, or both.
  • In collection settings, you can determine whether to allow horizontal swiping to navigate to different articles. You can also determine whether a collection appears as a browse page or opens to the first item in the collection. You can also allow users to save collections for offline viewing.
  • Use layout templates to determine the appearance of collection browse pages.
  • You can enable features such as social sharing, entitlement, and search.

 

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy