Custom fonts, configureFonts function

[jonasgroendahl]

You need to specify the ios key of the object needed by the function configureFonts. Just putting a default in there is not enough if you want your font to display on the ios simulator. Not sure if intended or not :)

{
ios: {
  // needs to be specified
},
 default: {
    regular: {
      fontFamily: 'Lato',
      fontWeight: 'normal',
    },
    medium: {
      fontFamily: 'Lato-Bold',
      fontWeight: 'bold',
    },
    light: {
      fontFamily: 'Lato-Light',
      fontWeight: 'normal',
    },
    thin: {
      fontFamily: 'Lato-Thin',
      fontWeight: 'normal',
    },
  }
}

[kopax]

Thanks man that helped me!

const fontConfig = {
  default: {
    regular: {
      fontFamily: 'raleway-regular',
      fontWeight: 'normal',
    },
    medium: {
      fontFamily: 'raleway-medium',
      fontWeight: 'normal',
    },
    light: {
      fontFamily: 'raleway-light',
      fontWeight: 'normal',
    },
    thin: {
      fontFamily: 'raleway-thin',
      fontWeight: 'normal',
    },
  },
};

fontConfig.ios = fontConfig.default;
fontConfig.android = fontConfig.default;

[prashantopenxcell]

Thank you @kopax

[ahwelgemoed]

@kopax - Works Thanks - Just note if using for WEB
fontConfig.web = fontConfig.default;

[github-actions]

Hello 👋, this issue has been open for more than 2 months with no activity on it. If the issue is still present in the latest version, please leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution on workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix the issue.

[ManishK-Patona]

where, we need to add this fontConfig?

[raajnadar]

In the theme object https://callstack.github.io/react-native-paper/fonts.html

[mags0ft]

I do not know what I am doing wrong, but this still doesn't work at all. I have tried for a solid 1.5 hours trying to get fonts work, so I'd be super happy if anyone could assist me with this even though the thread is dated!

const fontConf = {
    default: {
        regular: {
            fontFamily: "Funnel-Display",
            fontWeight: 'normal',
        },
        medium: {
            fontFamily: "Funnel-Display",
            fontWeight: 'normal',
        },
        light: {
            fontFamily: "Funnel-Display",
            fontWeight: 'normal',
        },
        thin: {
            fontFamily: "Funnel-Display",
            fontWeight: 'normal',
        },
    },
};

fontConf.ios = fontConf.default;
fontConf.android = fontConf.default;

const theme = {
    ...DefaultTheme,
    roundness: 10,
    fonts: configureFonts({ config: fontConf })
};

TypeScript is yelling at me at all occasions:

No overload matches this call.
  The last overload gave the following error.
    Type '{ default: { regular: { fontFamily: string; fontWeight: string; }; medium: { fontFamily: string; fontWeight: string; }; light: { fontFamily: string; fontWeight: string; }; thin: { fontFamily: string; fontWeight: string; }; }; }' is not assignable to type 'Record<string, MD3Type>'.
      Property 'default' is incompatible with index signature.
        Type '{ regular: { fontFamily: string; fontWeight: string; }; medium: { fontFamily: string; fontWeight: string; }; light: { fontFamily: string; fontWeight: string; }; thin: { fontFamily: string; fontWeight: string; }; }' is missing the following properties from type 'MD3Type': fontFamily, letterSpacing, fontWeight, lineHeight, fontSize

and

Property 'ios' does not exist on type '{ default: { regular: { fontFamily: string; fontWeight: string; }; medium: { fontFamily: string; fontWeight: string; }; light: { fontFamily: string; fontWeight: string; }; thin: { fontFamily: string; fontWeight: string; }; }; }'.

Property 'android' does not exist on type '{ default: { regular: { fontFamily: string; fontWeight: string; }; medium: { fontFamily: string; fontWeight: string; }; light: { fontFamily: string; fontWeight: string; }; thin: { fontFamily: string; fontWeight: string; }; }; }'.

(the code runs, but it still does not use the font.)

I am at the end of my knowledge and really don't know what to try anymore. Any help is appreciated!