【ReactNative開発】カスタムフォント（Googleフォント）を適用する方法

こんにちは。今日は、React Nativeのアプリに、カスタムフォントを適用する方法について整理しておこうと思います。

今回は、カスタムフォントとして、Google Fontのフォントを使えるようにします。

カスタムフォントのttfファイルを取得する

Google Fontの場合、以下からフォントファイルを取得できます。

https://fonts.google.com/

フォントファイルは、画面右上のDownload famillyより取得できます。

ダウンロードしたzipファイルを展開すると、ttfファイルが含まれていることが確認できます。

ttfファイルをプロジェクトに配置する

次に、前のステップで取得したフォントファイルをプロジェクトに配置します。

配置する場所は、プロジェクトフォルダ＞assets＞Fontsディレクトリとしました。（後でコード中でディレクトリパスを指定するので、ぶっちゃけどこでも大丈夫だと思われます）

React Nativeアプリからフォントを読み込む

次に、アプリコードからこのフォントを読み込み、利用可能な状態にします。

最上位のモジュール（app.tsx）で、以下のコードを記述します。これで、アプリ上で該当のフォントが利用可能な状態となりました。

  async componentDidMount() {
　　　　　　　　・・・・
    await Font.loadAsync({
      'Roboto': require('./assets/Fonts/Roboto.ttf'),
      'Roboto_medium': require('./assets/Fonts/Roboto_medium.ttf'),
      'KiwiMaru-Light': require('./assets/Fonts/KiwiMaru-Light.ttf'),
    })

React Nativeアプリからフォントを利用する

あとは実際に利用するだけです。

利用したいコンポーネントのスタイルで、fontFamilyとして指定すればOKです。

const styles = StyleSheet.create({
　　　　　　　　・・・・
    text:{
　　　　　　　　　　　　　　　　・・・・・
        fontFamily: 'KiwiMaru-Light'
    },
　　　　　　　　・・・・
})

ちゃんとフォントが変わりました！

以上、React Nativeでカスタムフォントを利用する方法でした！

この記事が少しでもお役に立ちましたら、以下のいいねボタンをポチっていただけますと励みになります！

おしまい

[番外編] ReactNativeをもっと学ぶなら・・・

React Nativeをもっとちゃんと学びたい！という方は、こちらにおすすめコンテンツをまとめましたので、ご参考にしていただければと思います・・！

土台のJavaScript/TypeScriptに不安がある方は、こちらもまとめましたので、ご参考になりましたら幸いです。