Had some issues with
@nativewindcss custom fonts through
@expo, because it wasn't clear enough for me from the docs how to include them
Here's how I did it:
- download your fonts in .otf or .ttf format if you want universal support accross platforms. OTF render better and have smaller size
- variable fonts don't work so you need to download the weights you want to use
- install them through expo-font library, easier through app.json config file
- add them in tailwind.config.ts under theme.extend.fontFamily with the same name as the file, which should follow the PostScript convention, otherwise it won't work for iOS
example:
{
theme: {
extend: {
fontFamily: {
"inter-black" : ["Inter-Black"],
// ...
}
}
}
}
You can now use them in Nativewind, but need to specify the font name and weight together
className="font-inter-black"