fontWeight and custom fontFamily are not working properly together.

[JieMin27]

Current behaviour

I tried to use the Poppins font for my project. I found out that to make the font weight work, I can't set the base font family as 'Poppins'; instead, I need to declare it like fontFamily: 'Poppins-SemiBold' for it to work. However, for the font to work on iOS, I need to set up the fontWeight, but the fontWeight can only be set up to 600.

IOS
Working:
fontFamily: 'Poppins-Bold',
fontWeight: '600',

Not Working:
fontFamily: 'Poppins-Bold',
fontWeight: '700',

Expected behaviour

How to reproduce?

Preview

What have you tried so far?

Your Environment

software	version
react-native	0.74.0
react-native-paper	5.12.3

[seb-zabielski]

Hey @JieMin27
Can you check if the problem still occurs is if you use Text component from react-native?

[JieMin27]

Hey @JieMin27 Can you check if the problem still occurs is if you use Text component from react-native?

The same issue occurs when using the Text component from React Native.

fontFamily: 'Poppins-Bold',
fontWeight: '700',

In android, Poppins-Bold will be overwritten by system font when fontWeight is set to more than 600

[seb-zabielski]

It seems that the problem is not related to the library itself.

I would suggest you try:

1. Check if Poppins-ExtraBold and Poppins-Black are also installed. Maybe not everything has been installed?
2. Try another font and see what the result will be?

[prashant-yi]

Same issue

[TrejoCode]

@JieMin27 @theprashant-one

My solution: create customs properties:

/**
 * @description Estilos base para los textos
 */

const fontWeights = {
  light: '300',
  normal: '400',
  medium: '500',
  bold: '700',
} as const;

const fontBold = {
  fontFamily: 'Roboto-Bold',
  fontWeight: fontWeights.bold,
};

const fontMedium = {
  fontFamily: 'Roboto-Medium',
  fontWeight: fontWeights.medium,
};

const fontRegular = {
  fontFamily: 'Roboto',
  fontWeight: fontWeights.normal,
};

const fontLight = {
  fontFamily: 'Roboto-Light',
  fontWeight: fontWeights.light,
};

const fontConfig = {
  fontFamily: 'Roboto',
};

export default {
  fontBold,
  fontLight,
  fontMedium,
  fontConfig,
  fontWeights,
  fontRegular,
};

My config to export to the provider

const theme = {
  ...DefaultTheme,
  ...light,
  fonts: configureFonts({config: fonts.fontConfig}),
};

Usage in Stylesheet

title: {
    marginTop: 32,
    marginBottom: 16,
    ...fonts.fontMedium,  // <--- Trick
  },