custom font weight not working

[ranjkkum]

I am trying to install custom fonts to a react native paper theme. Looked at the example mentioned on #3325 on the snack expo https://snack.expo.dev/@react-native-paper/font-styles-variants

i have implemented the below code after which the components picks up the fontFamily but the fontWeight does not change unless I specify the font family in the StyleSheet.

Can someone suggest what is wrong here.

import React from 'react';
import Toast, { BaseToast } from 'react-native-toast-message';
import { McIcon } from '@repo/mobile-ui';
import { Provider as PaperProvider, configureFonts } from 'react-native-paper';

import { Text } from 'react-native';
import { ThemeStatus, srgb } from '@repo/shared/utils';
import { DefaultTheme } from 'react-native-paper';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import AppNavigationShell from '../navigation/AppNavgationShell';
import { useFonts } from 'expo-font';

const theme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    
  },
};



export const App = () => {
  const [fontsLoaded] = useFonts({
    nsr: require('../../assets/fonts/NunitoSans_10pt-Regular.ttf'),
    nsrBold: require('../../assets/fonts/NunitoSans_10pt-Bold.ttf'),
    nsrItalic: require('../../assets/fonts/NunitoSans_10pt-Italic.ttf'),
    nsrBoldItalic: require('../../assets/fonts/NunitoSans_10pt-BoldItalic.ttf'),
  });

  const baseFont = {
    fontFamily: 'nsr',
  } as const;

  const baseVariants = configureFonts({ config: baseFont });
  const customVariants = {
    displayMedium: {
      ...baseVariants.displayMedium,
      fontFamily: 'nsr',
      fontWeight: 'normal',
    },

    bold: {
      ...baseVariants.bodyMedium,
      fontFamily: 'nsrBold',
      fontWeight: 'bold',
    },
    italic: {
      ...baseVariants.bodyMedium,
      fontFamily: 'nsrItalic',
      fontWeight: 'normal',
    },
    boldItalic: {
      ...baseVariants.bodyMedium,
      fontFamily: 'nsrBoldItalic',
      fontWeight: 'bold',
    },
  } as const;

  const mergedFonts = configureFonts({
    config: {
      ...baseVariants,
      ...customVariants,
    },
  });

  if (!fontsLoaded) {
    return <Text>Loading...</Text>;
  }
  return (
    <PaperProvider theme={{ ...theme, fonts: mergedFonts }}>
      <GestureHandlerRootView style={{ flex: 1 }}>
        <AppNavigationShell />
        <Toast config={toastConfig} />
      </GestureHandlerRootView>
    </PaperProvider>
  );
};

export default App;

[JoMarchant]

Hey there, I had the same problem some weeks ago, installing the individual font families fixed this for me. I also had to remove 'fontWeight' property from all of my fonts' config. Example code below:

export const fonts {
  titleLarge: {
    fontFamily: 'RedHatDisplay-ExtraBold',
    fontSize: 34,
    letterSpacing: 0.37,
    lineHeight: 41,
  },
  bodyMedium: {
    fontFamily: 'RedHatDisplay-Medium',
    fontSize: 16,
    letterSpacing: 0.36,
    lineHeight: 34,
  },
  bodySmall: {
    fontFamily: 'RedHatDisplay-Regular',
    fontSize: 14
    letterSpacing: 0.35,
    lineHeight: 46,
  },
...
};

This way I set the fontWeight using the specific fontFamily I installed. I also tried using some variable fonts but it seems those aren't compatible yet.

So I'd try removing fontWeight from your fonts' config, and setting it just with fontFamily.

Here's another useful issue you could check: facebook/react-native#42116

[ranjkkum]

thanks for your response.. i tried removing fontWeight but somehow its still not working ..

[JoMarchant]

Only other thing is I noticed you're importing Text from "react-native". I don't know if you're also importing it that way in other modules but it should be imported from "react-native-paper". That way it'll properly use the fonts provided by your theme.

[TrejoCode]

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
  },