How I can use custom fonts with react-native-web?

[h3nk42]

Hi,
Usually when building react-native for iOS and Android, both native platforms take their fonts out of native asset directories and bundle them in a way that I can use them in the React app.
How do I have to bundle the Fonts so that they can be used in react-native-web?

Im asking this question because on bit.dev react-native components are rendered through react-native-web but nobody knows how its possible to bundle custom .ttf files into the app.

So if i for example include fonts through the index.html file can they be used in my react-native components as fontFamily ?

[dalcib]

You can use expo-font for it.
It works in native and web.
It can be used out of an expo project.

[h3nk42]

It can be used out of an expo project.

using expo packages requires me to target ios => 12 which which we dont really want only for this use-case..
Isnt there an alternative to using expo ?

https://docs.expo.dev/bare/installing-expo-modules/

Do i need the native changes for expo to work in react-native-web?

[nandorojo]

There is no difference to using custom fonts within a standard React DOM app.

I wrote a guide for optimizing fonts as part of the Dripsy Font docs.

https://www.dripsy.xyz/fonts#web-optimizations

You should include them in your static files and link to them in your HTML with preload.

You may also want to use font-face CSS as part of the CSS reset if you're using custom fonts. This is what we do for beatgig.com