Custom Font у мобільній розробці — що це, формати та застосування

Що таке Custom Font?

Custom Font (кастомний шрифт) — це файл з гарнітурою, який не входить до стандартного набору шрифтів операційної системи. Розробники додають такі шрифти в проект для унікальної типографіки, що відповідає бренду. Кастомні шрифти можуть бути як платними комерційними гарнітурами, так і безкоштовними open-source шрифтами, наприклад, Inter, Montserrat, Roboto (кастомна версія).

Типові сценарії використання кастомних шрифтів: логотипи та заголовки брендових додатків, додатки для читання з особливими вимогами до типографіки, ігри з тематичними шрифтами, додатки для не-латинських мов, де системний шрифт не підтримує потрібні гліфи. За даними Google Fonts, понад 60% додатків у топ-100 кастомізують шрифти для візуальної диференціації.

Навіщо потрібні кастомні шрифти

Системні шрифти (San Francisco на iOS, Roboto на Android) оптимізовані для інтерфейсів, але не підходять для брендової типографіки. Кастомний шрифт посилює впізнаваність бренду, може містити спеціальні символи (іконкові шрифти) та покращує читабельність для специфічних аудиторій. Однак надмірне використання різних шрифтів погіршує UX — рекомендується не більше 2-3 сімейств на додаток.

Формати шрифтів для мобільних додатків

Мобільні платформи підтримують кілька форматів шрифтів. TrueType (TTF) — найпоширеніший формат, сумісний з усіма версіями iOS та Android. OpenType (OTF) — розширення TTF з підтримкою лігатур, альтернативних гліфів та OpenType-фіч. Обидва формати мають розширення .ttf та .otf і працюють ідентично на мобільних платформах.

WOFF2 (Web Open Font Format 2) — стиснутий формат для вебу, підтримуваний в Android з версії 10. WOFF2 дає стиснення до 30-50% відносно TTF. Для iOS WOFF2 підтримується через Safari, але в нативних додатках потрібна конвертація в TTF/OTF. Variable Fonts (варіативні шрифти) — сучасний формат, що зберігає всі накреслення в одному файлі.

Для мобільної розробки рекомендується використовувати OTF як основний формат — він підтримує OpenType-фічі при тому ж розмірі, що й TTF. Для економії місця в APK використовуйте стиснення через woff2 або завантаження шрифтів на вимогу.

Підключення кастомних шрифтів в iOS

Процес підключення кастомного шрифту в iOS складається з двох кроків: додавання файлу в bundle проекту та реєстрація в Info.plist. Файл шрифту поміщається в директорію проекту (зазвичай Resources/Fonts) і включається в target. В Info.plist додається масив UIAppFonts (Fonts provided by application) з іменами файлів шрифтів, включаючи розширення.

Після реєстрації шрифт доступний через UIFont(name:size:) за PostScript-іменем. PostScript-ім'я можна дізнатися через UIFont.familyNames та UIFont.fontNames(forFamilyName:). Якщо ім'я вказано невірно, UIFont(name:size:) повертає nil. Для налагодження рекомендується вивести всі зареєстровані шрифти на екран при першому запуску.

Приклад підключення

Розглянемо повний цикл підключення шрифту Montserrat в iOS-проект на Swift. Файл Montserrat-Regular.ttf додається в проект, вказується в Info.plist, після чого завантажується через UIFont та застосовується до UILabel. Для кожного накреслення (regular, bold, italic) додається окремий файл та окремий запис в Info.plist.

// 1. В Info.plist: UIAppFonts → "Montserrat-Regular.ttf"
// 2. Завантажити шрифт у коді
guard let customFont = UIFont(name: "Montserrat-Regular", size: 16) else {
    // повернення до системного шрифту
    label.font = UIFont.systemFont(ofSize: 16)
    return
}
label.font = customFont
// 3. Використання в NSAttributedString
let attributes = [NSAttributedString.Key.font: customFont]
let attributed = NSAttributedString(string: "Text", attributes: attributes)

Обробка ситуації, коли шрифт не завантажено (UIFont повертає nil) — обов'язкова. Замість падіння додатку використовуйте системний шрифт як fallback. Це особливо важливо для шрифтів, що завантажуються з мережі або додаються в опціональні модулі.

Динамічне завантаження через CTFontManager

Для шрифтів, що завантажуються на вимогу, використовується CTFontManagerRegisterGraphicsFont. Цей метод реєструє шрифт з даних у пам'яті (Data) та робить його доступним для UIFont. Після використання шрифт можна скасувати реєстрацію через CTFontManagerUnregisterGraphicsFont. Динамічне завантаження корисне для додатків з великим набором шрифтів, де не всі потрібні одразу.

Підключення кастомних шрифтів в Android

На Android кастомні шрифти додаються через ресурсну систему res/font. Файли TTF або OTF поміщаються в res/font/, після чого створюються XML-ресурси Font Family для групування накреслень. Починаючи з Android 8.0 (API 26), це єдиний рекомендований спосіб. Для старих версій використовується assets та Typeface.createFromAsset.

XML Font Family описує відповідність між накресленням (regular, bold, italic) та файлом шрифту. В XML-розмітці атрибут android:fontFamily="@font/my_font" автоматично вибирає потрібний файл при setTypeface з відповідним стилем. Це спрощує типографіку — достатньо вказати сімейство в темі, і Android сам підбере bold при виклику setTypeface(textView, Typeface.BOLD).

Створення Font Family

Створіть XML-файл в res/font/my_font.xml, де перераховані всі файли шрифту для різних накреслень. Кожен елемент має атрибути fontStyle (normal/italic) та fontWeight (100-900). Після цього в розмітці вкажіть android:fontFamily="@font/my_font". При використанні textStyle="bold" Android автоматично вибере файл з fontWeight 700.

<!-- res/font/my_font.xml -->
<?xml version="1.0" encoding="utf-8"?>
<font-family xmlns:app="http://schemas.android.com/apk/res-auto">
    <font
        android:fontStyle="normal"
        android:fontWeight="400"
        app:font="@font/my_font_regular" />
    <font
        android:fontStyle="normal"
        android:fontWeight="700"
        app:font="@font/my_font_bold" />
</font-family>

При використанні Font Family ресурсний спосіб автоматично кешує шрифти та вибирає правильне накреслення. Якщо потрібна вага відсутня в сімействі, Android синтезує її з найближчої доступної. Для точного контролю над шрифтом використовуйте Typeface.create() з явним зазначенням файлу.

Підключення у Flutter та React Native

В кроссплатформених фреймворках підключення шрифтів уніфіковано. Flutter використовує pubspec.yaml для зазначення шрифтів: файли поміщаються в папку fonts/ проекту, після чого оголошуються в секції fonts із зазначенням сімейства та накреслень. Потім шрифт застосовується через TextStyle(fontFamily: 'Montserrat') або в темі додатку. Flutter підтримує TTF та OTF.

React Native використовує два підходи: нативний (через Info.plist та res/font) або через бібліотеки react-native-vector-icons та @expo-google-fonts. Expo спрощує процес — шрифти завантажуються через expo-font: Font.loadAsync({ 'Montserrat': require('./assets/fonts/Montserrat.ttf') }). React Navigation та теми дозволяють задати шрифт глобально.

Приклад у Flutter

Оголошення шрифтів в pubspec.yaml та застосування в темі MaterialApp. Файли Montserrat-Regular.ttf та Montserrat-Bold.ttf поміщаються в fonts/. Після оголошення шрифт доступний через TextStyle у всьому додатку. Flutter автоматично використовує bold-файл при fontWeight: FontWeight.bold.

// pubspec.yaml
flutter:
  fonts:
    - family: Montserrat
      fonts:
        - asset: fonts/Montserrat-Regular.ttf
        - asset: fonts/Montserrat-Bold.ttf
          weight: 700
// Використання в темі
MaterialApp(
  theme: ThemeData(
    textTheme: TextTheme(
      headlineLarge: TextStyle(
        fontFamily: 'Montserrat',
        fontWeight: FontWeight.bold,
        fontSize: 28
      )
    )
  )
)

Якщо Flutter не знаходить шрифт за вказаним шляхом, додаток використовує системний fallback-шрифт без помилок. Для налагодження увімкніть checkConsistency в MaterialApp — він перевіряє наявність шрифтів та виводить попередження в консоль при відсутності.

Оптимізація розміру шрифтів

Розмір APK та IPA безпосередньо залежить від кількості включених шрифтів. Один файл TTF важить 50–500 КБ для латинського набору символів та до 2–5 МБ для шрифтів з підтримкою кирилиці, китайських ієрогліфів або інших розширених наборів. Десять шрифтів можуть додати 10–20 МБ до розміру додатку, що критично для мобільного завантаження.

Для оптимізації використовуйте subsetting — видалення невикористовуваних символів з файлу шрифту. Інструменти на кшталт glyphhanger, fonttools (pyftsubset) та Google Webfont Optimizer створюють версію шрифту тільки з потрібними гліфами (латиниця + кирилиця + цифри + знаки пунктуації). Це зменшує розмір на 50–80%. На iOS можна використовувати on-demand ресурси для шрифтів, які не потрібні при першому запуску.

Варіативні шрифти

Variable Font (варіативний шрифт) — це один файл, що містить всі накреслення: від Thin до Black та від Condensed до Expanded. Один варіативний шрифт може замінити 10–20 окремих файлів з різними вагами. Розмір такого файлу приблизно дорівнює 1–2 статичним файлам. Підтримка: iOS 11+, Android 10+, Flutter (через FontVariation), React Native (через кастомні бібліотеки).

Стиснення та завантаження на вимогу

Використовуйте WOFF2 для зменшення розміру шрифтів на 30–50%. На Android з API 29 можна використовувати WOFF2 безпосередньо. Для iOS потрібно конвертувати WOFF2 в TTF перед реєстрацією. Шрифти, що використовуються тільки в онбордингу або на певних екранах, завантажуйте через on-demand ресурси (iOS) або Dynamic Feature (Android) — вони не потраплять в базовий APK.

Продуктивність та best practices

Кастомні шрифти впливають на продуктивність двома способами: час завантаження та пам'ять. При першому зверненні до шрифту система читає файл з диска, парсить таблиці шрифту та створює внутрішні структури для рендерингу. Для шрифту розміром 1 МБ це займає 20–50 мс. Кешування після першого завантаження усуває затримку при повторних зверненнях.

Пам'ять: кожен завантажений шрифт зберігається в кеші процесу. Системні шрифти попередньо завантажені, кастомні — завантажуються при першому використанні. В пам'яті шрифт займає приблизно в 2–3 рази більше, ніж на диску, через розібрані структури: таблиць cmap, glyf, head, hmtx. Для 5 кастомних шрифтів середнього розміру (загальний об'єм 3 МБ) знадобиться близько 6–9 МБ RAM.

Рекомендації

Обмежте кількість кастомних шрифтів до 2–3 сімейств на додаток. Використовуйте варіативні шрифти для заміни кількох накреслень. Застосовуйте системні шрифти для UI-елементів (кнопки, підписи, списки) та кастомні тільки для акцентної типографіки (заголовки, банери). Кешуйте Typeface на Android через Map, а UIFont на iOS — через статичні змінні.

object FontCache {
    private val cache = mutableMapOf<String, Typeface>()
    fun get(context: Context, fontId: Int): Typeface {
        return cache.getOrPut(fontId.toString()) {
            ResourcesCompat.getFont(context, fontId)
        }
    }
}
// Використання в RecyclerView
override fun onBindViewHolder(holder: ViewHolder, position: Int) {
    holder.textView.typeface = FontCache.get(context, R.font.montserrat_regular)
}

Завантаження Typeface в onBindViewHolder допустиме тільки при наявності кешу. Без кешу кожен виклик createFromAsset створює новий об'єкт та читає файл з диска. При скролі RecyclerView це викликає помітні лаги. Кеш вирішує проблему, оскільки шрифт завантажується один раз та перевикористовується.