Help us understand the problem. What is going on with this article?

ReactNative で カスタムフォントを使用する

More than 1 year has passed since last update.

前提

  • Project の名前は Hoge
  • フォントのフルネームは、 Fuga, ファイル名は、Fuga.ttf

1.ttfファイルの配置

Hoge/assets/fonts/Fuga.ttf

(注意)
フォントのファイル名は、フォントのフルネームと一致させておくこと。
iOSでは、フォントのフルネーム、Androidでは、フォントのファイル名でロードさせるので、
フォントのファイル名をフォントのフルネーム名を一致させると、両方のOSで簡単に利用できます。

フォントのフルネームは、Macの場合、ファイルを右クリックして「情報を見る」→「フルネーム」で調べることができます

2. package.jsonの編集

下記の行を追加

"rnpm": {
"assets": ["./assets/fonts/"]
}

3. link

下記のコマンドを実行

$react-native link

下記が出力されるはず

rnpm-install info Linking assets to ios project
rnpm-install info Linking assets to android project
rnpm-install info Assets have been successfully linked to your project

4. 確認

$git diff
modified:   ios/Hoge.xcodeproj/project.pbxproj
modified:   ios/Hoge/Info.plist
modified:   package.json

Untracked files:
  (use "git add <file>..." to include in what will be committed)

android/app/src/main/assets/fonts/Fuga.ttf
assets/
  • iOS
    • Projectファイルに、Fuga.ttfの参照が追加される
    • Info.plist に、Fuga.ttfという行が追加されている
  • Android
    • android/app/src/main/assets/fonts/Fuga.ttfにコピーされる

5. Textタグの設定

<Text style={{fontFamily:'Fuga'}}>HogeHoge</Text>

参考にしたページ

https://medium.com/@danielskripnik/how-to-add-and-remove-custom-fonts-in-react-native-b2830084b0e4
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした