Repository navigation
Bundling custom Fonts into react-native-web #2176
Description
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 ?
Reacted by hoyeon ryoo
Activity
dalcib commentedon Dec 13, 2021
You can use expo-font for it.
It works in native and web.
It can be used out of an expo project.
h3nk42 commentedon Dec 13, 2021
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 commentedon Dec 13, 2021
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-faceCSS as part of the CSS reset if you're using custom fonts. This is what we do for beatgig.com