Разработка кастомных шрифтов и типографики мобильного приложения

Разработка кастомных шрифтов и типографики мобильного приложения

Подключить кастомный шрифт в мобильное приложение — звучит просто. Но до продакшна путь проходит через лицензирование, правильный формат файлов, загрузку без задержек, Dynamic Type, fallback при ошибке загрузки и читаемость на маленьких экранах. Каждый пункт — отдельная задача.

Лицензирование: самый частый источник проблем

Шрифт для десктопного сайта и шрифт для мобильного приложения — разные лицензии у большинства фаундри. Google Fonts — бесплатно для мобильных приложений (OFL, Apache 2.0). Adobe Fonts через Creative Cloud — требует проверки лицензии для app embedding. Коммерческие шрифты типа Helvetica Neue, Gotham, Brandon Grotesque — нужна отдельная лицензия на embedded use.

Нарушение лицензии — это не только юридический риск. App Store Review Team иногда отклоняет приложения с нелицензированными шрифтами, если это обнаруживается. Проверяем лицензию до начала работы.

Форматы и подготовка файлов

iOS принимает OTF и TTF. Android — TTF. React Native и Flutter — TTF/OTF.

Если шрифт поставляется только в одном начертании, а дизайн использует Regular, Medium, SemiBold, Bold — нужны отдельные файлы для каждого веса. Фейковый bold (system synthetic bold) на мобиле выглядит плохо и может привести к reject на iOS.

Variable Fonts (.ttf с fvar таблицей) — прогрессивный подход: один файл покрывает весь диапазон weight и width. iOS поддерживает variable fonts с iOS 14, Android — с API 26. React Native — частичная поддержка через fontVariationSettings. Flutter — через FontVariation в TextStyle.

Оптимизация размера: если используете только латиницу и кириллицу — subsetting через pyftsubset (fonttools) убирает неиспользуемые глифы. Типичный Latin+Cyrillic subset из полного шрифта: с 800KB до 150KB.

Подключение на iOS

Шрифт добавляется в Bundle, регистрируется в Info.plist под ключом UIAppFonts:

<key>UIAppFonts</key>
<array>
  <string>CustomFont-Regular.otf</string>
  <string>CustomFont-Bold.otf</string>
</array>

В SwiftUI используется через .font(Font.custom("CustomFont-Regular", size: 16)). В UIKit — UIFont(name: "CustomFont-Regular", size: 16).

Типичная ошибка: имя шрифта в коде и Postscript Name файла не совпадают. Проверяем через CTFontManagerCopyAvailableFontFamilyNames() или Font Book на macOS.

Dynamic Type на кастомном шрифте: UIFontMetrics(forTextStyle: .body).scaledFont(for: customFont) — это масштабирует кастомный шрифт пропорционально системным настройкам размера. Без этого приложение не пройдёт accessibility audit.

Подключение на Android

Шрифт кладётся в res/font/, используется через XML или код:

val typeface = ResourcesCompat.getFont(context, R.font.custom_regular)
textView.typeface = typeface

В Compose:

val customFontFamily = FontFamily(
    Font(R.font.custom_regular, FontWeight.Normal),
    Font(R.font.custom_bold, FontWeight.Bold)
)
Text(text = "Hello", fontFamily = customFontFamily)

Downloadable Fonts через Google Fonts API — экономит размер APK, но требует интернета при первом запуске и fallback-шрифта на случай недоступности сети.

Типографическая шкала

Кастомный шрифт нужно правильно «настроить» в масштабе: подобрать line height, letter spacing, оптимальный size для каждого текстового стиля. Это не то, что делается за час — нужно тестировать на реальных экранах разных размеров и плотностей (iPhone SE vs iPhone 15 Pro Max, ldpi vs xxxhdpi на Android).

Минимальный читаемый размер на мобиле: 12pt/sp для Caption, 14pt/sp для Body Small. Ниже — только в очень специфичных случаях.

Для дизайн-передачи: все текстовые стили оформляются в Figma как Text Styles с полной спецификацией, передаются разработчику через Figma Dev Mode с конкретными значениями.

Стоимость рассчитывается индивидуально после анализа проекта.