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)

Most upvoted comments

I thought i fixed this but maybe somehow it regressed again. @alitnk will be on it today for a bit too