---
schema_version: "1"
id: 3d254b7ba99c9fb4d8edc9640b3fa4c1305cba5d298a7a264b5b612c75394d6f
title: Set Up Custom Fonts
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/commerce/264-0-0/rt_cms_layouts_personalization_fonts.md
canonical_url: https://help.salesforce.com/s/articleView?id=commerce.rt_cms_layouts_personalization_fonts.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 4087762e604f80164ac165ed790ef5d23f542a9c2096ae98dcae692f2adbb85f
description: 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.
products:
  - Commerce
release: "264"
---
# 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.](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-commerce-retail-264-0-0-production-enus/17d647fb-8988-49fb-9add-c4f4cc79c9e4/retail/images/rt_cms_layouts_personalization_fonts_html.png)

## 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.](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-commerce-retail-264-0-0-production-enus/17d647fb-8988-49fb-9add-c4f4cc79c9e4/retail/images/rt_cms_layouts_personalization_fonts_text.png)

## 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.](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-commerce-retail-264-0-0-production-enus/17d647fb-8988-49fb-9add-c4f4cc79c9e4/retail/images/rt_cms_layouts_personalization_fonts_picker.png)

## 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.