Custom fonts in the Flow Builder

When building flows, you might want to use a custom font to match the rest of your app. Here’s how to add custom fonts and use them in your flows.

Configure fonts in the Styles panel before you start designing the flow. This way, any changes you make will apply globally.

Built-in fonts

When you create a flow in the Builder, Adapty uses a system font by default. This usually means SF Pro on iOS and Roboto on Android, though it can vary depending on the device. You can also choose from commonly used fonts like Arial, Times New Roman, Courier New, Georgia, and Helvetica. Each of these fonts comes with a few style options.

These fonts are not supplied as part of the Adapty SDK and are only used for preview purposes. We cannot guarantee they will work perfectly on all devices. However, in our testing, these fonts are typically recognized by most devices without any additional effort on your part. You can also check out which fonts are available by default on iOS.

Built-in fonts

Add a custom font

The file you upload is for editor preview only — Adapty doesn’t push it to users’ devices. To render the font on device, include the file in your app bundle. Without it, the SDK falls back to SF Pro (iOS) or Roboto (Android) at runtime.

If you need to use fonts other than the system default, you can add a custom font.

To add a custom font:

  1. If the font is variable, split it into single-style files with unique names. The weight, bold, and italic controls don’t apply to custom fonts. Adapty only registers one style per custom font file. To style the text, switch the font to the correct variation.

  2. Choose Upload new font in any of the font dropdowns.

Add custom font
  1. In the Add custom font window, fill in the following fields:

    The Font name in Builder, iOS font name, and Android font name must each be unique across all custom font files in the app.

    • Font name in Builder: Enter a display name for the font. This name will appear in font dropdowns across the Builder.
    • iOS font name: Enter the PostScript name of the font. You can find it in Font Book → PostScript name, or through the UIFont API.
    • Android font name: Enter the file name from res/font/. Use only lowercase letters, numbers, and underscores.
    • Font file: Drag and drop the font file or click Select files. Supported formats: .ttf, .otf, .woff, .woff2.
  2. Click Save font.

    Add custom font window

By uploading the font file to Adapty, you’re confirming that you have the right to use it in your app.

Delete a custom font

Deleting a custom font from the dashboard silently rewrites every reference to the system font across draft and published flows. There’s no warning, and you can’t undo this action. Before deleting, confirm no live flow uses the font.

Custom fonts in flow templates

The Flow template library includes templates with custom fonts. Hover the Custom font chip on a template card to see which fonts it uses.

Adapty doesn’t bundle these fonts. You need to source them yourself, matching the font names shown in the chip. Some fonts may require a commercial license.

Once you have the font files, follow the bundling steps below.

Add the font files to your app’s bundle

If you’re already using a custom font elsewhere in your app, you just need to add your paywall fonts in the same way. If not, make sure to include the font file in your app’s project and bundle. Read how to do it below: