---
title: "Кастомные шрифты в Paywall Builder"
description: "Улучшите дизайн Paywall Builder в Adapty, добавив кастомные шрифты."
---

Визуальная согласованность — основа хорошего дизайна. При создании no-code пейволов вы можете захотеть использовать собственный шрифт, чтобы он соответствовал стилю остального приложения. Здесь мы разберём, как настраивать шрифты и как их применять.

:::warning
Этот раздел описывает новый Paywall Builder, который работает с iOS, Android и React Native SDK версии 3.0 и выше, а также с Flutter и Unity SDK версии 3.3.0 и выше. Информация о legacy Paywall Builder, совместимом с Adapty SDK v2.x и ниже, — в статье [Кастомные шрифты в legacy Paywall Builder](using-custom-fonts-in-legacy-paywall-builder).
:::

## Что можно настроить \{#what-can-be-customized\}

Каждый текстовый элемент в Paywall Builder может иметь собственный шрифт и стиль. Настроить это можно в элементах управления шрифтами для каждого текстового блока:

  <img src="/assets/shared/img/56a8845-choose_font.webp"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

В ряде случаев удобнее сменить шрифт сразу для всего пейвола. Это можно сделать в разделе Layout в Paywall Builder, [настроив Paywall Font](paywall-layout-and-products#font-settings-of-your-paywall).

## Шрифты, доступные по умолчанию \{#fonts-available-by-default\}

При создании пейвола в Builder Adapty по умолчанию использует системный шрифт — как правило, SF Pro на iOS и Roboto на Android, хотя это может варьироваться в зависимости от устройства. Также доступны часто используемые шрифты: Arial, Times New Roman, Courier New, Georgia, Palatino и Verdana. Каждый из них поддерживает несколько вариантов начертания:

  <img src="/assets/shared/img/f9d87dc-default_fonts.webp"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

:::note
Эти шрифты не поставляются в составе Adapty SDK и используются только для предпросмотра. Мы не можем гарантировать их корректную работу на всех устройствах. Тем не менее по результатам нашего тестирования большинство устройств распознаёт эти шрифты без каких-либо дополнительных действий с вашей стороны. Вы также можете [посмотреть, какие шрифты доступны по умолчанию на iOS](https://developer.apple.com/fonts/system-fonts/).
:::

## Как добавить кастомный шрифт в дашборд Adapty \{#how-to-add-a-custom-font-to-the-adapty-dashboard\}

Если стандартного набора недостаточно, вы можете добавить кастомный шрифт. После добавления он будет доступен во всём приложении и его можно использовать для любого текстового блока на любом пейволе.

1. Выберите **Add custom font** в любом из выпадающих списков шрифтов:

  <img src="/assets/shared/img/7498a5a-add_custom_font.webp"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

2. В окне **Add Custom Font**:
   1. Загрузите файл шрифта (максимальный размер: 10 МБ).
   2. Введите название для использования в Paywall Builder.
   3. Укажите правильные названия шрифта для обеих платформ.
   4. Убедитесь, что файл шрифта включён в бандл вашего приложения, если это ещё не сделано.

  <img src="/assets/shared/img/89fb748-CleanShot_2024-02-07_at_13.21.552x.webp"
  style={{
    border: 'none', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

:::warning
Загружаемый файл шрифта не передаётся на устройство — он используется только для предпросмотра. SDK получает лишь строки с указанием шрифта, применяемого при отрисовке пейвола. Поэтому вы должны включить тот же файл шрифта в бандл приложения и указать правильные платформенные названия шрифта — иначе всё не будет работать корректно. Не переживайте, это займёт совсем немного времени.
:::

:::note
Загружая файл шрифта в Adapty, вы подтверждаете, что имеете право использовать его в своём приложении.
:::

## Как узнать правильное название шрифта на iOS \{#getting-the-correct-font-name-on-ios\}

Есть два способа получить правильный идентификатор шрифта: первый требует небольшого кода, второй — использования приложения Font Book, доступного на macOS.

Если вы уже добавили кастомный шрифт в бандл своего приложения, скорее всего, вы уже обращаетесь к нему по названию. Чтобы проверить, вызовите `UIFont.familyNames()`, чтобы получить family name шрифта, а затем передайте его в `UIFont.fontNames(forFamilyName: familyName)`. Это можно сделать в `viewDidLoad`, после чего удалить фрагмент кода:

```swift showLineNumbers title="Swift"
override func viewDidLoad() {
    super.viewDidLoad()
  	...
  	for family in UIFont.familyNames.sorted() {
    		print("Family: \(family)")
	    	let names = UIFont.fontNames(forFamilyName: family)
    		for fontName in names {
        		print("- \(fontName)")
    		}
    }
}
```

Значение `fontName` из этого фрагмента — это то, что вам нужно. Оно может выглядеть примерно как «MyFont-Regular».

Второй способ проще: установите шрифт на Mac, откройте приложение **Font Book**, найдите нужный шрифт и используйте его `PostScript name`:

  <img src="/assets/shared/img/bb8a902-CleanShot_2024-01-12_at_20.32.222x.webp"
  style={{
    border: 'none', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

## Как узнать правильное название шрифта на Android \{#getting-the-correct-font-name-on-android\}

Если вы правильно добавили файл шрифта в папку ресурсов, просто укажите имя этого файла. Убедитесь, что оно написано строчными буквами и содержит только буквы, цифры и символы подчёркивания — иначе шрифт может не работать.

Правильность имени файла можно проверить, вызвав `ResourcesCompat.getFont(context, R.font.my_font)`, где `my_font` — используемое вами имя файла. Именно это значение — `my_font` — нужно указать при создании кастомного шрифта в Adapty.

## Добавление файлов шрифтов в бандл приложения \{#adding-the-font-files-to-your-apps-bundle\}

Если вы уже используете кастомный шрифт в другом месте приложения, просто добавьте шрифты для пейвола тем же способом. Если нет — убедитесь, что файл шрифта включён в проект и бандл приложения. Подробные инструкции:

- На iOS: [В официальной документации Apple](https://developer.apple.com/documentation/uikit/adding-a-custom-font-to-your-app)
- На Android: [В официальной документации Android](https://developer.android.com/develop/ui/views/text-and-emoji/fonts-in-xml)

:::important
При скачивании архивов со шрифтами из Adapty вы получаете все варианты начертания. Добавляйте в бандл приложения только те файлы шрифтов, которые действительно используются в вашем пейволе, — это поможет уменьшить размер приложения. Например, если в пейволе используется только `OpenSans-Regular.ttf`, не включайте `OpenSans-Bold.ttf` в бандл приложения.
:::