🐕

ReactNativeに Custom Fontを適用する

2024/01/21に公開

Android

概要

ReactNativeのTextにデフォルトで適用できないfontを指定する方法です。 (iPhoneのみで動作確認してます)
ReactNative0.69以降(?正確でないかも)とそれ以前でコマンドが異なっていたりでしたので改めて整理しました。
(Appendix) Appleの https://developer.apple.com/fonts/ からインストールできるfontを使う例についても書きます。

ReactNativeでイカしたフォントの "SF Pro Rounded" をデザイナーから指定されたので適用しようとしたものの変わっておらず（そもそもエンジニアの目ではフォントって適用されてないことに気づかないことも多いですよね。。。）また適用するまでに地味につまづいたので方法を整理しました。

前提

以下動作環境で確認しています。

react-native 0.73.1
react-native-cli (not expo)
PC: MacBook Pro, インストール先： iPhone (13)

結論

[Project root]/assets/fonts/ にfont file(.ttf .otfなど)を置く
Project rootにreact-native.config.js　を配置し、以下を記載。

module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: ['./assets/fonts/'],
};

npx react-native-asset を実行
https://developer.apple.com/fonts/ からインストールしたfontはMacに標準で入っている"Font Book"アプリの「書き出す」で.otf .ttfファイルに吐き出すことが可能

説明

React Native のTextに当てはめるにはstyleで以下のようにfontFamily属性を指定するといけます。

<Text
style={{
  fontFamily: 'Hiragino Kaku Gothic Pro',
  fontSize: 20,
  height: 50,
}}>
Hiragino
</Text>

(ヒラギノ　ステキですよね)

ただしそれだけでは指定できないfontもあります。fontファイルがデフォルトで入っていない場合です。

<Text
style={{
  fontFamily: 'SF Pro Rounded',
  fontSize: 20,
  height: 50,
}}>
SF Pro Rounded
</Text>

(SF Pro Rounded あまり知らないけど、角張っているしできてなさそう)

その場合はまずフォントファイル（.ttf, .otf）ファイルなどをダウンロードし、[Project root]/assets/fonts/ に配置します。

その後、以下ファイルをProject Rootに配置します。

react-native.config.js

module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: ['./assets/fonts'],
};

以下コマンドを実行します。
npx react-native-asset
※ npx react-native link を実行するという記事が見られますが、現行versionでは本コマンドは無効化されています。(0.69以前くらいまで？？)

以下、実行結果

すると以下が自動で追加/編集されます

ios/Info.plist

	<key>UIAppFonts</key>
	<array>
		<!-- ... -->
		<!-- ここから追加 -->
		<string>SF-Pro-Rounded-Black.otf</string>
		<string>SF-Pro-Rounded-Bold.otf</string>
		<string>SF-Pro-Rounded-Heavy.otf</string>
		<string>SF-Pro-Rounded-Light.otf</string>
		<string>SF-Pro-Rounded-Medium.otf</string>
		<string>SF-Pro-Rounded-Regular.otf</string>
		<string>SF-Pro-Rounded-Semibold.otf</string>
		<string>SF-Pro-Rounded-Thin.otf</string>
		<string>SF-Pro-Rounded-Ultralight.otf</string>
		<!-- ... -->
	</array>

ios/link-assets-manifest.json

{
  "migIndex": 1,
  "data": [
    {
      "path": "assets/fonts/SF-Pro-Rounded-Black.otf",
      "sha1": "13d52d11fe7d3c771edb6e9d0a69cd0a64b31c8e"
    },
    {
      "path": "assets/fonts/SF-Pro-Rounded-Bold.otf",
      "sha1": "31a01afbc52456362fff937dfda6a2f1373b306b"
    },
    {
      "path": "assets/fonts/SF-Pro-Rounded-Heavy.otf",
      "sha1": "dac80a70331c92597768f3d2c8d8c8b43f41e3ec"
    },
... 略
  ]
}

(android/にも同ファイルができます。)

project.pbxproj

/* Begin PBXBuildFile section */
... 略
	7752A95ADAD54A03AC3A9DC2 /* SF-Pro-Rounded-Black.otf in Resources */ = {isa = PBXBuildFile; fileRef = 23955F7EAA6147CC8AA2E269 /* SF-Pro-Rounded-Black.otf */; };
	9D999221BBC44C5F87B3440D /* SF-Pro-Rounded-Bold.otf in Resources */ = {isa = PBXBuildFile; fileRef = C761092F6A8A4A96ADB9CA78 /* SF-Pro-Rounded-Bold.otf */; };
	7DE766BBD4B742C4A84C6075 /* SF-Pro-Rounded-Heavy.otf in Resources */ = {isa = PBXBuildFile; fileRef = EE10B061C2C241188C216343 /* SF-Pro-Rounded-Heavy.otf */; };
... 略

無事適用できました！
Before

After

比べるとおしゃれな気がしますね。

Appendix Apple公式(?)Font適用する方法

SF Pro Roundedなど、AppleのFontは以下からダウンロードできます。
https://developer.apple.com/fonts/

ただし、上記サイトからはdmgファイルがダウンロードされ、.otfや.ttf形式でそのままダウンロードすることができません。

様々なサイトからそれらしきファイルをダウンロードできますが、ライセンス関係など自信がなく、ちゃんとした方法を知りたいと思いました。
以下手順を踏めばいけるようです。

上記サイトからdmgファイルをダウンロードしてPCにインストール
MACでおそらくデフォルトで入っている"Font Book" Bookアプリを起動
Fontを選択
ファイル > 書き出し

※ただし利用に関してはライセンスをご確認ください。

概要

前提

結論

説明

Appendix Apple公式(?)Font適用する方法

Discussion