How add custom font family?

I installed a font using expo in this way. It works

<Text style={{ fontFamily: 'Inter_900Black'  }}>Inter Black</Text>

Now I updated tailwind.config.js in this way:

module.exports = {
  content: [
    "./**/*.{ts,tsx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        'inter-black': ['Inter_900Black'],
      },
    },
  },
  plugins: [],
  corePlugins: require('tailwind-rn/unsupported-core-plugins'),
}

So I updated the style. But I’m getting the error: Unsupported Tailwind class: "inter-black"

<Text style={tailwind('inter-black') }>
  Inter Black
</Text>

Also, I tried in this way, but same message:

module.exports = {
  content: [
    "./**/*.{ts,tsx}",
  ],
  theme: {
    fontFamily: {
      'inter-light': ['Inter_300Light'],
      'inter-black': ['Inter_900Black'],
    },
    extend: {},
  },
  plugins: [],
  corePlugins: require('tailwind-rn/unsupported-core-plugins'),
}

[erquhart]

Spent more time than I care to admit on this, but it turns out we’re just forgetting to prefix font-, eg., font-inter-light. Which, to be fair, could be more explicitly called out in the tailwind css docs.

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'sans': ['Arial'], // outputs "font-sans"
        'inter-light': ['Inter_300Light'], // outputs "font-inter-light"
      },
    },
  },
}

Works fine in tailwind-rn 4.2.0, works with or without theme extension.

[erquhart]

@tommoholmes can you share a code snippet where you’re actually using the font?