Search code examples
androidreact-nativefonts

How do you use a customized font with a single file for android in react native?


I added a customized font to my react native project. The font only has a single ttf file (e.g. FontFamilyName.ttf), instead of multiple files for each style (e.g. FontFamilyName-Regular.ttf, FontFamilyName-Bold.ttf, FontFamilyName-SemiBold.ttf, FontFamilyName-Thin.ttf). But it is a font collection that contains multiple styles like Bold, Thin, SemiBold, etc. I can see all the variants with the Mac App FontBook.

For iOS, I can successfully use every style of the font by specifying "fontFamily" with the postscript name of each style (e.g. FontFamilyName-Thin). But for Android, I can only use the default style - "regular" by specifying "fontFamily" with the name of the ttf file (i.e. FontFamilyName). I can't find a way to use other styles. Specifying "fontFamily" with the postscript name of a style like I do for iOS doesn't work for Android.


Solution

  • For those who have the same problem using variable fonts, which are single-filed, currently the best solution I've found is to use an app called 'Slice' to slice the font variations from the single file and add the separate font files to your project.

    For how to use Slice, check out https://medium.com/timeless/adding-custom-variable-fonts-in-react-native-47e0d062bcfc

    For how to add custom fonts to your project, check out https://mehrankhandev.medium.com/ultimate-guide-to-use-custom-fonts-in-react-native-77fcdf859cf4