Font Weight of '700' or 'bold' not working in Android for Custom fonts

[vkumaez]

🐛 Bug Report

When using custom fonts (fontFamily with typefaces), with a fontWeight of 700 or 'bold', Android defaults to system font instead of the custom font added in the app. ( Example: A fontWeight of 700 should use SourceSansPro-Bold)

When using other numerical fontWeight values, the fonts in iOS changes typeface accordingly, but android stays on the typeface mentioned in the fontFamily.

Font used: Source Sans Pro - https://fonts.google.com/specimen/Source+Sans+Pro

Link to my custom mapping.json

https://gist.github.com/vkumaez/b39d63073ebc2925d6ab39d02f53b781.js

Steps to reproduce the behaviour:

1. Add Source Sans Pro font to the app and link it properly.
2. Create a custom mapping.json with font family 'SourceSansPro-Bold' and font weight 700 or bold for any of the Text category (h1, h2,...)
3. Observe that the font is correct in iOS, but in Android it falls back to some system font.
   (In the below image, note the letter 'g'. In Android, Heading1, Heading2, Heading3 has a different font instead of SourceSansPro-Bold, while in iOS all the text have the correct font).

The same issue happens with OpenSans font, at font weight 700. So it's definitely not an issue with the font.

Expected behaviour

Based on the fontWeight, the typeface of the custom font should be used automatically. ( Example: A fontWeight of 700 should use SourceSansPro-Bold)

UI Kitten and Eva version

Package	Version
@eva-design/eva	2.1.0
@ui-kitten/components	5.1.0

Environment information

System:
OS: macOS 10.15.7
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Binaries:
Node: 14.17.4 - /usr/local/bin/node
npm: 6.14.14 - /usr/local/bin/npm
Watchman: 2021.06.07.00 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 14.4, DriverKit 20.2, macOS 11.1, tvOS 14.3, watchOS 7.2
Android SDK:
API Levels: 29, 31
Build Tools: 29.0.2, 30.0.2, 31.0.0
System Images: android-29 | Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom
IDEs:
Android Studio: 2020.3 AI-203.7717.56.2031.7583922
Xcode: 12.4/12D4e - /usr/bin/xcodebuild
npmPackages:
react: 17.0.1 => 17.0.1
react-native: 0.64.0 => 0.64.0

[lbuttignol]

Same issue here! ✋
@vkumaez Did you find a solution to avoid this behavior?

[vitorverasm]

same thing here

[Nr9]

Same issue here

[Nr9]

is this related to facebook/react-native#29117 ?

[marlti7]

Same issue here

[lcustodio]

Same issue here

[GautierT]

Maybe related to this #1568

[shehanrangana]

Same issue here

[ricardodolnl]

I have the same issue. I've defined my custom fonts in mapping.json:

  "strict": {
    "text-font-family": "Baloo2-Regular",
    "text-heading-1-font-size": 36,
    "text-heading-1-font-weight": "800",
    "text-heading-1-font-family": "Baloo2-Bold"
  }
}

But the h1 category text is not bold on android (does work on ios). I did notice that if I add fontWeight: 400 style to the text that it does become bold on android (but on ios it becomes regular).

So a temporary fix is this:

<Text category="h1" style={{fontWeight: Platform.OS === 'android' ? '400' : '800'}}>
    Your title
</Text>

[Ferraah]

Same here, still not solved

[petrusek]

I had the same issue on Android for buttons - using font weight different than "normal" will cause the font family to be different...

I've found more issues related to this:

• Remove direct pointing to the exact font weight value eva-design/eva#80
• Custom fonts from expo are not working with some components (only in Android) #1399
• Expo App using UI Kitten problem loading especific custon font weights #1387

As suggested above (and elsewhere) it can be solved with a custom mapping.json, which would have font weights "normal" for Android (and correct weights for all other platforms).

By studying the main mapping file https://github.com/eva-design/eva/blob/master/packages/eva/mapping.json we need this special mapping for Android to override all non-normal font weights:

{
  "strict": {
    "text-heading-1-font-weight": "normal",
    "text-heading-2-font-weight": "normal",
    "text-heading-3-font-weight": "normal",
    "text-heading-4-font-weight": "normal",
    "text-heading-5-font-weight": "normal",
    "text-heading-6-font-weight": "normal",
    "text-subtitle-1-font-weight": "normal",
    "text-subtitle-2-font-weight": "normal",
    "text-paragraph-1-font-weight": "normal",
    "text-paragraph-2-font-weight": "normal",
    "text-caption-1-font-weight": "normal",
    "text-caption-2-font-weight": "normal",
    "text-label-font-weight": "normal"
  },
  "components": {
    "Button": {
      "appearances": {
        "filled": {
          "variantGroups": {
            "size": {
              "tiny": { "textFontWeight": "normal" },
              "small": { "textFontWeight": "normal" },
              "medium": { "textFontWeight": "normal" },
              "large": { "textFontWeight": "normal" },
              "giant": { "textFontWeight": "normal" }
            }
          }
        }
      }
    },
    "Tab": {
      "appearances": {
        "default": { "mapping": { "textFontWeight": "normal" } }
      }
    }
  }
}

If you use Lodash, you can merge this with your own mapping.json for Android and it should work.

Alternatively, you can merge it by hand

function uiKittenMappingForAndroid(mapping: any) {
  return Platform.OS !== 'android'
    ? mapping
    : {
        ...mapping,
        strict: {
          ...(mapping?.strict ?? {}),
          'text-heading-1-font-weight': 'normal',
          'text-heading-2-font-weight': 'normal',
          'text-heading-3-font-weight': 'normal',
          'text-heading-4-font-weight': 'normal',
          'text-heading-5-font-weight': 'normal',
          'text-heading-6-font-weight': 'normal',
          'text-subtitle-1-font-weight': 'normal',
          'text-subtitle-2-font-weight': 'normal',
          'text-paragraph-1-font-weight': 'normal',
          'text-paragraph-2-font-weight': 'normal',
          'text-caption-1-font-weight': 'normal',
          'text-caption-2-font-weight': 'normal',
          'text-label-font-weight': 'normal',
        },
        components: {
          ...(mapping?.components ?? {}),
          Button: {
            ...(mapping?.components?.Button ?? {}),
            appearances: {
              ...(mapping?.components?.Button?.appearances ?? {}),
              filled: {
                ...(mapping?.components?.Button?.appearances?.filled ?? {}),
                variantGroups: {
                  ...(mapping?.components?.Button?.appearances?.filled?.variantGroups ?? {}),
                  size: {
                    ...(mapping?.components?.Button?.appearances?.filled?.variantGroups?.size ?? {}),
                    tiny: {
                      ...(mapping?.components?.Button?.appearances?.filled?.variantGroups?.size?.tiny ?? {}),
                      textFontWeight: 'normal',
                    },
                    small: {
                      ...(mapping?.components?.Button?.appearances?.filled?.variantGroups?.size?.small ?? {}),
                      textFontWeight: 'normal',
                    },
                    medium: {
                      ...(mapping?.components?.Button?.appearances?.filled?.variantGroups?.size?.medium ?? {}),
                      textFontWeight: 'normal',
                    },
                    large: {
                      ...(mapping?.components?.Button?.appearances?.filled?.variantGroups?.size?.large ?? {}),
                      textFontWeight: 'normal',
                    },
                    giant: {
                      ...(mapping?.components?.Button?.appearances?.filled?.variantGroups?.size?.giant ?? {}),
                      textFontWeight: 'normal',
                    },
                  },
                },
              },
            },
          },
          Tab: {
            ...(mapping?.components?.Tab ?? {}),
            appearances: {
              ...(mapping?.components?.Tab?.appearances ?? {}),
              default: {
                ...(mapping?.components?.Tab?.appearances?.default ?? {}),
                mapping: {
                  ...(mapping?.components?.Tab?.appearances?.default?.mapping ?? {}),
                  textFontWeight: 'normal',
                },
              },
            },
          },
        },
      };
}

And you would apply it with

<ApplicationProvider
  {...eva}
  customMapping={uiKittenMappingForAndroid(uiKittenMapping)}
  theme={{ ...eva.light, ...uiKittenTheme }}
>

[jessegong37110]

Same here, any solution now?

[patissier-boulanger]

+1

[Akronae]

Same boat

[pjsandwich]

Same issue here, however writing fontFamily: "XXXpx" seemed to remedy?

[xdliyushen]

+1

[AngsterDev]

same here

[tommycarpi]

Me too, still not solved?

[marinagavin]

Same here 🤚🏼

[adrianpcloud]

Still the same. I just remove fontStyle and fontWeight and slap in 'FontName-Bold' as font family