Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
vkumaez opened this issue Aug 10, 2021 · 20 comments
Open

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

vkumaez opened this issue Aug 10, 2021 · 20 comments

Comments

@vkumaez
Copy link

vkumaez commented Aug 10, 2021

🐛 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).

Screenshot 2021-08-09 at 1 28 14 PM

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

Screenshot 2021-08-09 at 8 50 48 PM

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
Copy link

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

@vitorverasm
Copy link

same thing here

@Nr9
Copy link

Nr9 commented Nov 5, 2021

Same issue here

@Nr9
Copy link

Nr9 commented Nov 5, 2021

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

@marlti7
Copy link

marlti7 commented Nov 9, 2021

Same issue here

1 similar comment
@lcustodio
Copy link

Same issue here

@GautierT
Copy link

GautierT commented Jan 7, 2022

Maybe related to this #1568

@shehanrangana
Copy link

Same issue here

@ricardodolnl
Copy link

ricardodolnl commented Feb 18, 2022

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
Copy link

Ferraah commented May 14, 2022

Same here, still not solved

@petrusek
Copy link

petrusek commented Jun 2, 2022

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:

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
Copy link

Same here, any solution now?

@patissier-boulanger
Copy link

+1

@Akronae
Copy link

Akronae commented Jan 27, 2023

Same boat

@pjsandwich
Copy link

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

@xdliyushen
Copy link

+1

@AngsterDev
Copy link

same here

@tommycarpi
Copy link

Me too, still not solved?

@marinagavin
Copy link

Same here 🤚🏼

@adrianpcloud
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests