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

If you need more than what’s offered by default, you can add a custom font.

To add a custom font:

  1. 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:

    • 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

The font file you upload is not sent to the device; it’s only used for preview. Our SDK receives only the strings referencing the font to use while rendering the paywall. Therefore, you must include the same font file in the app bundle and provide the correct platform-specific font names for everything to work smoothly. Don’t worry, it won’t take much time.

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

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:

When downloading font bundles, you’ll receive all font variations in an archive. Only add the specific font files your paywall uses to your app bundle to minimize app size. For example, if you only use OpenSans-Regular.ttf in your paywall, don’t include OpenSans-Bold.ttf in your app bundle.