How to add custom font name and use it?

[Saad-Bashar]

First of all thanks for this amazing library. I am trying to add a custom font and use it in my app. I followed the docs https://arabold.github.io/react-native-whirlwind/customization/fonts and have been able to add custom fonts. My question is, in my theme, do I need to add my custom font name within the specific fonts that the library provides? For example, this works -

const t = createTheme({
    fontFamilies: {
        'sans': 'Spartan-Medium' ,
        'sansBold': 'Spartan-Bold'
    },
})

is it possible to do it like this -

const t = createTheme({
    fontFamilies: {
        'spartanMedium': 'Spartan-Medium' ,
        'spartanBold': 'Spartan-Bold'
    },
})

Or do I need to specify my fonts within the provided names like 'sans' 'mono' 'serif' etc?

[arabold]

It is not possible to add new custom font names to the theme directly. Instead you're expected to replace sans, serif and mono with the desired fonts as in your first example: 'sans': 'Spartan-Medium'. This will use Spartan-Medium anywhere you use t.fontSans. The thinking is that most apps will probably not use more than the three default fonts (sans, serif, and mono) and variants (normal, bold, italic). But I'll explain my reasoning in more detail below...

If you still prefer a custom style class instead of t.fontSans, you can extend Whirlwind to add new, additional classes as described here: https://arabold.github.io/react-native-whirlwind/customization/extending-whirlwind

const t = StyleSheet.create({
  // Define your theme as usual but note the spread operator
  ...createTheme({
    // ...
  }),
  spartanMedium: {
    fontFamily: 'Spartan-Medium'
  }
})

This will provide a new t.spartanMedium class that you can use in your app. However, using t.spartanMedium would require the engineering team to remember the specific font name every time they need to use it. If you ever decide to change the font, i.e. the client wants to use "thin" instead of "medium" now, then you would have to update all your code across the whole application. That's why I generally would recommend against such a naming scheme. Instead, maybe a t.fontTitle or t.fontLargeTitle would be more obvious and future proof?

[Saad-Bashar]

Cool, yes makes sense. Later I just added inside 'sans'. May be primaryFont, secondaryFont, tertiaryFont makes more sense?