Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
11
Help us understand the problem. What is going on with this article?
@lazyppp

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

More than 3 years have 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
11
Help us understand the problem. What is going on with this article?
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.
Sign Up
If you already have a Qiita account Login
11
Help us understand the problem. What is going on with this article?