Expo のプロジェクトでカスタムフォントを利用する

必要なライブラリをインストールします。

npx expo install expo-font

次に ttf ファイルをダウンロードします。

自分は FontsFree-Net-SF-Compact-Rounded-Medium.ttf をダウンロードしました。

ダウンロードした ttf ファイルは assets/fonts 以下に置きます。

assets/fonts/SFCompactRoundedMedium.ttf の名前で配置しました。

次にプロジェクトのルートとなるビューでフォントをロードします。一般的なプロジェクトだと App.tsx で、 expo router を使っている場合は app/_layout.tsx です。

HTML

import { useFonts } from 'expo-font';
  
const [loaded, error] = useFonts({
    SFCompactRoundedMedium: require('../assets/fonts/SFCompactRoundedMedium.ttf')
  });

ここで読み込んだフォントは、別のビューで { fontFamily: 'SFCompactRoundedMedium' } のように使うことができます。