Кастомные шрифты в React Native

Иногда случается острая необходимость добавить в проект несистемные шрифты. В сети есть достаточно много инструкций о том как сделать это при помощи react-native link. Мы же не ищем лёгких путей и посмотрим как можно обойтись без сторонних команд и файлов конфигурации — сделаем всё вручную.

Сразу подумаем о кроссплатформенности. Шрифты добжны быть в формате otf или ttf. Android воспринимает только файлы с именем вида fontname_bold.ttf. Никаких Fontname-Bold и прочих отступлений от паттерна.

# Шаблон

Если проект был создан командой npx react-native init ProjectName, то на момент написания заметки в корне проекта будет лежать файл App.js. Модифицируем его так, чтобы после сборки видеть наши шрифты.

/**
 * @format
 * @flow
 */

import React from 'react'
import { SafeAreaView, StyleSheet, ScrollView, View, Text, Platform } from 'react-native'

const App: () => React$Node = () => {
  return (
    <SafeAreaView>
      <ScrollView contentInsetAdjustmentBehavior="automatic">
        <View style={styles.body}>
          <Text style={styles.title}>Merienda Bold</Text>
          <Text style={styles.text}>Merienda Normal</Text>
        </View>
      </ScrollView>
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  title: {
    textAlign: 'center',
    marginVertical: 25,
    fontSize: 30,
    fontFamily: 'merienda',
    fontWeight: '700',
  },
  text: {
    textAlign: 'center',
    fontSize: 20,
    fontFamily: Platform.OS === 'android' ? 'merienda_regular' : 'merienda',
    fontWeight: '400',
  },
  // что-то ещё...
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

# iOS

Добавление шрифтов для iOS потребует достаточно много шагов, но все они очень простые. Если по пунктам, получается так:

Открыть проект в Xcode. Если читатель впервые замужем работает с Xcode, уточню: открывать нужно не весь проект, а только директорию ios.

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

Убедиться, что у шрифтов выставлен чекбокс «Target Membership». Если нет, отметить.

Target Membership Checkbox

Проверить, что шрифты появились во вкладке «Build Phases».

Build Phases

Связать шрифты через info.plist. Перечислять нужно каждое наименование, если файлов несколько. В Information Property List кликнуть на иконку плюса, из выпадающего списка выбрать Fonts provided by application. Также через плюс добавить новые значения, именами которых сделать названия файлов.

Fonts provided by application

Собрать проект и запустить.

# Android

Скопировать файлы шрифтов в директорию имя_проекта/android/app/src/main/assets/fonts, предварительно создав и assets, и fonts.

android
├── app
│   ├── src
│   │   ├── main
│   │   │    ├──assets
│   │   │    │  ├──fonts
│   │   │    │  │  ├──merienda_bold.ttf
│   │   │    │  │  ├──merienda_regular.ttf
1
2
3
4
5
6
7
8

Собрать проект и запустить. Обратить внимание на строку стилей выше:

fontFamily: Platform.OS === 'android' ? 'merienda_regular' : 'merienda',
1

Если шрифт не отобразился, скорее всего, он имеет нетипичное название. Например, ожидается начертание normal, а имя шрифта при этом regular. iOS поймёт что это за шрифт, если указать соответствующее значение fontWeight. Подсказать же Android'у явно какой шрифт использовать можно только указав полное имя файла шрифта.