Как подключить шрифты в React Native на iOS и Android

Подключить шрифты в React Native можно через регистрацию файлов в проекте, нативную пересборку и корректное имя семейства в стилях. Для bare React Native обычно используют папку assets/fonts и команду react-native-asset, а в Expo — пакет expo-font. Ниже разобраны обе схемы, различия iOS и Android, начертания и проверка результата.

Для локального шрифта подготовьте файлы в формате TTF или OTF. Веб-форматы WOFF и WOFF2 предназначены прежде всего для браузера и не являются универсальной заменой нативным форматам в мобильном приложении. Проверьте лицензию: разрешение на использование шрифта на сайте не всегда означает разрешение на встраивание в мобильное приложение.

Заранее определите набор начертаний. Для большинства интерфейсов достаточно Regular, Medium, Semibold и Bold, а также Italic только при реальной необходимости. Чем больше файлов попадает в приложение, тем больше его размер. Не добавляйте все доступные варианты гарнитуры, если интерфейсу нужны только два или три веса.

В проекте без Expo шрифты нужно добавить как ресурсы приложения. Создайте в корне проекта каталог assets/fonts и поместите туда файлы, например BrandSans-Regular.ttf и BrandSans-Bold.ttf. Названия файлов должны быть стабильными: не используйте пробелы, кириллицу и случайные суффиксы, которые меняются при каждом экспорте.

В корне проекта создайте файл react-native.config.js. В секции assets укажите путь к папке со шрифтами: assets: [«./assets/fonts»]. Это сообщает инструментам React Native, какие локальные файлы необходимо включить в нативные проекты. Следите, чтобы имя каталога и регистр букв точно совпадали с фактическим путем.

Запустите из корня проекта команду npx react-native-asset. Она копирует ресурсы в iOS- и Android-части приложения и обновляет необходимые настройки. После выполнения проверьте изменения в нативных каталогах: файлы должны присутствовать в проекте Xcode и в Android-ресурсах. Если команда не сработала, сначала проверьте путь в конфигурации и установку зависимостей.

Перезапуска Metro недостаточно: шрифт становится доступен после новой нативной сборки. Удалите приложение с симулятора или устройства, затем выполните сборку iOS и Android заново. Для iOS иногда требуется очистить Derived Data или выполнить чистую сборку в Xcode. На Android полезно очистить сборочные артефакты, если старый ресурс продолжает кэшироваться.

После регистрации укажите шрифт в StyleSheet через свойство fontFamily. Например, для текста можно задать fontFamily: «BrandSans», fontSize: 16 и lineHeight: 22. Однако строка BrandSans должна соответствовать имени семейства, которое понимает конкретная платформа. Имя файла BrandSans-Regular.ttf не всегда равно имени семейства BrandSans.

Самая надежная проверка — открыть метаданные файла в редакторе шрифтов или системном просмотрщике и найти названия Family, Full name и PostScript name. На iOS чаще критично внутреннее имя шрифта, а Android может по-разному обрабатывать семейство и отдельные файлы. Поэтому не ориентируйтесь только на имя файла и проверяйте реальный результат на обеих платформах.

Для отдельных файлов начертаний используйте согласованную систему. Если семейство корректно распознает веса, можно задать fontFamily: «BrandSans» и fontWeight: «700». Если Bold не выбирается или заменяется системным шрифтом, попробуйте использовать точное имя подключенного начертания и оставить fontWeight: «400». Важно не смешивать несколько несовместимых способов без проверки результата.

На iOS шрифт должен попасть в target приложения и быть зарегистрирован в процессе сборки. Если ресурс скопирован в папку проекта, но не включен в нужный target, приложение его не увидит. В Xcode проверьте наличие файла в разделе ресурсов, включение в Target Membership и отсутствие дубликатов с тем же именем.

iOS особенно чувствительна к названию семейства и PostScript name. Файл с названием BrandSans-Bold.ttf может фактически содержать семейство Brand Sans и внутреннее имя BrandSans-Bold. Если в fontFamily указать имя, которого нет в метаданных, текст будет отображаться системной гарнитурой или визуально потеряет нужное начертание.

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

Android может отличаться от iOS по интерпретации имени семейства, весов и метрик. Проверяйте приложение минимум на одном эмуляторе и одном физическом устройстве, если это возможно. Разные версии Android иногда по-разному отображают высоту строки, поэтому для важных экранов тестируйте не только наличие шрифта, но и вертикальное выравнивание элементов.

Не полагайтесь на автоматическое преобразование fontWeight. Если у вас есть только Regular, значение fontWeight: «700» не создаст настоящий Bold: система может искусственно утолщить символы или заменить гарнитуру. Если нужен точный фирменный вес, добавьте соответствующий файл и настройте его явное соответствие в стилях.

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

В Expo применяйте expo-font, а не смешивайте его с ручным копированием файлов в ios и android. Для локальных ресурсов укажите файлы через конфигурацию приложения или загрузите их в компоненте с помощью useFonts. Пока шрифт не загружен, показывайте экран загрузки либо используйте безопасный системный fallback, чтобы интерфейс не менял размеры скачком.

При использовании конфигурационного плагина после изменения списка шрифтов нужна новая нативная сборка. Обновление JavaScript-кода само по себе не добавит новый файл в уже собранное приложение. Для разработки с загрузкой через useFonts проверяйте состояние loaded и error, а при ошибке выводите понятное сообщение в журнал разработки.

Не смешивайте вызовы useFonts с fontFamily, который используется до завершения загрузки. На практике удобно хранить имена гарнитур в одном объекте констант и применять их во всех стилях. Это уменьшает риск опечатки, помогает заменить шрифт в одном месте и делает дизайн-систему проекта предсказуемой.

Представим приложение с гарнитурой Brand Sans и тремя файлами: Regular, Medium и Bold. В теме можно создать объект typography: { body: «BrandSans», heading: «BrandSans» }. Для основного текста задайте fontSize 16, lineHeight 22 и fontWeight «400», для подписи — fontSize 13 и fontWeight «500», а для заголовка — fontSize 28, lineHeight 34 и fontWeight «700».

Если заголовок выглядит системным, проверяйте проблему по порядку: загружен ли файл, выполнена ли пересборка, совпадает ли fontFamily с метаданными, присутствует ли нужный вес и содержит ли файл кириллические глифы. Такой алгоритм быстрее, чем случайная смена fontSize, fontWeight и lineHeight.

Да, ресурсы можно добавить вручную в нативные проекты iOS и Android, но такой способ требует больше контроля и легко приводит к расхождению конфигураций. Для стандартного bare React Native удобнее описать папку assets/fonts и зарегистрировать ее автоматизированной командой.

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

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

Для нативного приложения безопаснее использовать TTF или OTF. WOFF и WOFF2 оптимизированы для веб-браузеров и не являются универсальным форматом для iOS и Android, поэтому их подключение может не работать ожидаемым образом или потребовать отдельной обработки.

Переменные шрифты могут вести себя по-разному в нативных компонентах и на разных версиях платформ. Для стабильного результата используйте заранее экспортированные статические начертания TTF или OTF: Regular, Medium, Semibold и Bold. Это упрощает контроль веса, тестирование и предсказуемость интерфейса.

Чаще всего в файле нет нужных глифов. Проверьте поддержку кириллицы, латиницы, цифр, математических знаков и символов валют. Если отдельные символы отсутствуют, операционная система использует fallback-шрифт, поэтому строка может выглядеть неоднородно даже при правильном fontFamily.

Надежное подключение шрифтов в React Native строится на четырех действиях: используйте подходящий формат, зарегистрируйте ресурсы, выполните нативную пересборку и проверьте реальные имена семейств на iOS и Android. Отдельно протестируйте веса, кириллицу, переносы и размер приложения. Актуальность инструкции: 22 июля 2026 года.

Если для приложения или бренда нужен собственный характер, создайте подходящую гарнитуру на fontgenerator.ru и подготовьте ее к использованию в цифровых интерфейсах.