tamagui: FontFamily not being passed through to Tamagui Text components (Text, SizableText, Paragraph)
Current Behavior
I am using the Google fonts, specifically this library: @expo-google-fonts/alex-brush.
Let’s say you have code like this:
<SizableText
fontSize={tamaguiSize.$6}
lineHeight={tamaguiSize.$7}
style={{ fontFamily: 'AlexBrush_400Regular' }}
>
HELLO!
</SizableText>
The fontFamily in the style attribute is not being passed to the underlying native Text component. I did try putting the color attribute into the style attribute, and it did work. So I think at least some attributes are getting passed through. I also tried using Tamagui’s <Text> component, and I had the same issue.
Similarly, adding the fontFamily attribute to the Tamagui component doesn’t work and leads to a TypeScript error.
<SizableText
fontSize={tamaguiSize.$6}
lineHeight={tamaguiSize.$7}
fontFamily="AlexBrush_400Regular"
>
HELLO!
</SizableText>
->
Type '"AlexBrush_400Regular"' is not assignable to type 'Variable<any> | FontTokens | undefined'.
I also get this error when using the fontFamily attribute: Warning: No font found. For a sized text component, you either need to set fontFamily directly, or through the "defaultFont" setting in your createTamagui config.
However, I do not want to change the defaultFont, as I only want to use my Google font in specific places in the app.
One fix is to use react-native’s <Text> component. In this case, defining the style as the @expo-google-fonts documentation recommends works fine:
<Text style={{ fontFamily: 'AlexBrush_400Regular', fontSize: 40 }}>IT WORKS!</Text>
Expected Behavior
I would expect the fontFamily within the style attribute of Tamagui text components to override the default font. Furthermore, I would also expect the fontFamily attribute itself, on Tamagui text components, to override the default font, even if it is not within the style attribute.
Tamagui Version
1.45.10
Reproduction
import { Pressable, Text } from 'react-native'
import { Paragraph, Stack, YStack } from '@my/ui' // Based upon Tamagui's solito-starter
<Paragraph
fontSize={tamaguiSize.$6}
lineHeight={tamaguiSize.$7}
style={{ fontFamily: 'AlexBrush_400Regular' }}
>
It doesn't work :-(
</Paragraph>
<Text style={{ fontFamily: 'AlexBrush_400Regular', fontSize: 40 }}>It does work!</Text>
{/* Notice that the second component is React Native's native Text component. */}
### System Info
_No response_
About this issue
- Original URL
- State: closed
- Created a year ago
- Comments: 16 (7 by maintainers)
I thought i fixed this but maybe somehow it regressed again. @alitnk will be on it today for a bit too