Font download from google fonts not working on Android

🐛 Bug Report

I have downloaded all the following font from google fonts and try to load then using expo-font 8.0.0 within expo SDK36

          Raleway: require('../assets/fonts/Raleway/Raleway-Regular.ttf'),
          'Raleway-medium': require('../assets/fonts/Raleway/Raleway-Medium.ttf'),
          'Raleway-light': require('../assets/fonts/Raleway/Raleway-Light.ttf'),
          'Raleway-thin': require('../assets/fonts/Raleway/Raleway-Thin.ttf'),
          Roboto: require('../assets/fonts/Roboto/Roboto-Regular.ttf'),
          Vollkorn: require('../assets/fonts/Vollkorn/Vollkorn-Regular.ttf'),
          Montserrat: require('../assets/fonts/Montserrat/Montserrat-Regular.ttf'),
          AbrilFatface: require('../assets/fonts/Abril_Fatface/AbrilFatface-Regular.ttf'),
          Lato: require('../assets/fonts/Lato/Lato-Regular.ttf'),
          PTserif: require('../assets/fonts/PT_Serif/PTSerif-Regular.ttf'),

Environment

  Expo CLI 3.19.2 environment info:
    System:
      OS: Linux 5.3 Debian GNU/Linux 10 (buster) 10 (buster)
      Shell: 5.0.3 - /bin/bash
    Binaries:
      Node: 13.11.0 - ~/.nvm/versions/node/v13.11.0/bin/node
      Yarn: 1.22.4 - ~/.nvm/versions/node/v13.11.0/bin/yarn
      npm: 6.14.4 - ~/workspace/git.kopaxgroup.com/momagroup/icimatin-native/node_modules/.bin/npm
    npmPackages:
      expo: ~36.0.2 => 36.0.2 
      react: ^16.13.1 => 16.13.1 
      react-native: file:expo/react-native-sdk-36.0.1.tar.gz => 0.61.4 
    npmGlobalPackages:
      expo-cli: 3.17.18

Android/Web/Ios

Steps to Reproduce

• Download from google fonts all those fonts and load them with Fonts.loadAsync.

Expected Behavior

I expect to be able to use the style fontFamily: 'Montserrat' and see this fonts used by my text.

Actual Behavior

It does not change the font on android.

I have tried to set the value using the react-native-paper theme, it works on android only within one page, but on others it doesn’t show anything, this is how I have applied the fonts in one case in my app because of Android:

                <TextInput
                  style={styles.input}
                  theme={{
                    ...theme,
                    fonts: {
                      ...theme.fonts,
                      ...(!getFontKeyFromId(input.value) ? {} : configureFonts({
                        web: {
                          regular: {
                            fontFamily: getFontKeyFromId(input.value),
                            fontWeight: 'normal',
                          },
                        },
                        ios: {
                          regular: {
                            fontFamily: getFontKeyFromId(input.value),
                            fontWeight: 'normal',
                          },
                        },
                        android: {
                          regular: {
                            fontFamily: getFontKeyFromId(input.value),
                            fontWeight: 'normal',
                          },
                        },
                      })),
                    },
                  }}
                  icon="chevron-down"
                  mode="outlined"
                  label={label}
                  editable={false}
                  disabled={loading > 0}
                  value={list?.find((d) => d.id === input.value)?.description || ''}
                  error={meta.error && meta.touched}
                  {...buttonProps}
                />

Strangly, on another page with the same idea, it doesn’t work.

[Jongkeun]

omg, I found out the reason! It was fixed after removing font-weight attribute. I think, if I want to use bold fonts, I have to load bold font of that in Android. It seems like that anyway.

[IjzerenHein]

Yes that’s right. Android has limitations for using font-weight and font-style. You have to load the font by its full name (e.g. “Parisienne_400Regular” and refer to it by that name in font-family without using the font-weight. This issue seems to have been resolved, so I’m going to close it 😃