Salesforce Docs Portal

Set Up Custom Fonts

Custom fonts help you extend your brand to the POS app. Upload your fonts to match your company's brand guidelines, and use CMS to select them. You can then customize your app with your specific fonts.

  • App Build: Any
  • Platform Support: iPhone, iPad
  • Technical Prerequisites:
    • Font files in TTF format must be supplied
    • A valid license for each custom font for use within an app setting (i.e., iOS) must be provided

Once you have completed the technical prerequisites contact Salesforce Customer Help to obtain a new app build. Fonts must be packaged with your app, so a new build will be required. Include the font files and any licenses.

Once your build is ready you can use the CMS to configure Layouts, and various UI elements to use your custom font.

Add Custom Fonts to Text (HTML) Overlays

  1. Go to Layout Pages | All Layouts.
  2. Select a layout to edit or create a new one.
  3. Click on ADD TOP ROW.
  4. Click into the created cell.
  5. Click Cell Overlays | Text (HTML).
  6. Double-click the text overlay in the cell.
  7. Highlight the text in the editor, and click the font menu.
  8. Select a font from the menu.

    Text editor dialog shows the selection of a font from the toolbar menu.

Add Custom Fonts to Text (Native) Overlays

  1. Go to Layout Pages | All Layouts.
  2. Select a layout to edit or create a new one.
  3. Click on ADD TOP ROW.
  4. Click into the created cell.
  5. Click Cell Overlays | Text (Native).
  6. Double click the text overlay in the cell.
  7. Click the FONT PICKER button.
  8. Select a font from the FONT PICKER popup (see the using the Font Picker Popup section).The native text editor shows the location of the font picker option.

Customize UI Elements

Various UI elements can be styled with custom fonts in your app. In this walkthrough, we will use a custom font for temporary dialog display boxes that your app might display, but these steps can be applied to any settings that support font options.

  1. Go to an App Config by clicking Apps > All in the left menu.
  2. Select an App by hovering and clicking edit.
  3. Click the UI tab, and then Click the UI Options module.
  4. Find the ButterBox Font Settings.
  5. Click the FONT SETTINGS button.
  6. Use the FONT PICKER popup to configure your font (see the using the Font Picker Popup section).

Use the Font Picker Popup

  1. Select a font for iOS by clicking the menu picker icon.
  2. Select Font Settings such as size, style, and color to further customize your app.
  3. Click the Set button to set your choices.

    The font settings dialog shows the selection of a font.

Known Issues & Restrictions

Since your app must be built with your custom fonts, any previous versions will not be able to display the fonts even after configuring your UI in the CMS.