タイトル通り、React Native アプリにカスタムフォントを適用する方法についてです。
今回は Google フォントの「Noto-Sans-CJK-JP」を導入しました。
実装にあたり、参考になったサイトがこちらです。
リアクトネイティブ(React Native)でカスタムフォントを使う方法 – リアクトネイティブ(React Native)プロジェクトでカスタムフォントを適用して使う方法について説明します。
https://dev-yakuza.posstree.com/react-native/react-native-custom-font/
まず、導入したいフォントをダウンロードします。
私は下記のページから「Noto-Sans-CJK-JP」フォントをダウンロードしました。
minoryorg/Noto-Sans-CJK-JP: サブセット化済みの「Noto Sans CJK JP」（日本語フォント）のCSS付きWebフォント
https://github.com/minoryorg/Noto-Sans-CJK-JP
ダウンロードが完了したら、Android、iOS の各プロジェクトに追加していきます。
まず、Android の場合は android/app/src/main/assets/fonts ディレクトリを作成し、こちらに必要な .ttf ファイルを追加していきます。
私の場合は、下記の3ファイルを追加しました。
- NotoSansCJKjp-Regular.ttf
- NotoSansCJKjp-Bold.ttf
- NotoSansCJKjp-Black.ttf
iOS の場合は、/ios/Fonts ディレクトリを作成し、ここに必要な .ttf ファイルを追加します。
次に Xcode でプロジェクトを開き、ウィンドウ左上のプロジェクトディレクトリのルートで右クリックし、「Add Files to “[プロジェクト名]”…」をクリックします。
そして、先程追加した /ios/Fonts をプロジェクトに追加するのですが、この時「Create folder references」を選択することをお忘れなく！
一度間違えて「Create groups」を選択して追加した時は、アプリが実行された直後にクラッシュしました。
上記が完了したら Info.plist を開き、下記を追加してください。
<key>UIAppFonts</key> <array> ...... <string>Fonts/NotoSansCJKjp-Regular.ttf</string> <string>Fonts/NotoSansCJKjp-Bold.ttf</string> <string>Fonts/NotoSansCJKjp-Black.ttf</string> </array>
準備はこれで完了です。
あとは、フォントを変更したいテキストに対して fontFamily を指定すればフォントが変更されます。
サンプルコードは下記のとおりです。
const styles = StyleSheet.create({
message: {
fontFamily: 'NotoSansCJKjp-Regular',
}
});
<Text style={styles.message}>Google フォントを適用したメッセージ</Text>
これでフォントが変更されました。
Android はフォントの追加が簡単でしたが、iOS はそれと比べると少し作業が多い印象でした。
でも、どちらも実際にやってみればそれほど難しい作業でもなかったです。
とりあえず、/ios/Fonts をプロジェクトに追加する際に「Create folder references」を選択することを忘れなければ何とかなるはずです。
以上、React Native のアプリに Goolge フォントを追加する方法についてでした。
ご参考になれば幸いです。
