tamagui: Default font family not being passed down to Text component on Web

Hey, tried to necro an old issue about this but since its closed i believe it never notified anyone.

I have this issue on release 1.76.0.

Environment:

Web: Vite@4.3.0

Reproduction:

Simply install the sample project with npm create tamagui@latest
Edit src/Root.tsx to include two Text components as follows:

    <TamaguiProvider config={config} defaultTheme="light">
      <YStack f={1} ai="center" jc="center">
        <Text fontFamily='$body' fontSize={50}>Hello world</Text>
        <Text fontSize={50}>Hello world</Text>
      </YStack>
    </TamaguiProvider>

Run yarn dev:vite
Notice how both text components render differently, one with a font family and one with default browser’s font.

I believe this is the best way to explain this issue since it uses the sample project as reproduction repo.

In native, this works correctly and you may skip the fontFamily prop for all Text components, hence why i believe this is a bug on web, if it something i missed and this is on purpose please let me know.

About this issue

Original URL
State: closed
Created 7 months ago
Reactions: 1
Comments: 16 (6 by maintainers)

Most upvoted comments

For info, not initializing an unset prop in useFont but adding defaultFont: 'body' in tamagui.config.js is working as natew answered.

LucasBourgeois on Dec 4, 2023

It works for me in the simple starter but you need to set defaultFont. Once I set it, it looks good:

CleanShot 2023-12-02 at 10 06 43@2x

natew on Dec 2, 2023

@junioroga I managed to solve this. You need to have a global.css file for web at the root of your repo

@font-face {
  font-family: 'Quicksand';
  src: url('/assets/fonts/Quicksand-Light.ttf') format('truetype');
  font-weight: 300;
}

@font-face {
  font-family: 'Quicksand';
  src: url('/assets/fonts/Quicksand-Regular.ttf') format('truetype');
  font-weight: 400;
}

@font-face {
  font-family: 'Quicksand';
  src: url('/assets/fonts/Quicksand-Medium.ttf') format('truetype');
  font-weight: 500;
}

@font-face {
  font-family: 'Quicksand';
  src: url('/assets/fonts/Quicksand-SemiBold.ttf') format('truetype');
  font-weight: 600;
}

@font-face {
  font-family: 'Quicksand';
  src: url('/assets/fonts/Quicksand-Bold.ttf') format('truetype');
  font-weight: 700;
}

for example

Then in the root _layout.js >

import ‘…/global.css’;

and of course >

const [loaded] = useFonts({
    QuicksandLight: require('assets/fonts/Quicksand-Light.ttf'),
    QuicksandRegular: require('assets/fonts/Quicksand-Regular.ttf'),
    QuicksandMedium: require('assets/fonts/Quicksand-Medium.ttf'),
    QuicksandSemiBold: require('assets/fonts/Quicksand-SemiBold.ttf'),
    QuicksandBold: require('assets/fonts/Quicksand-Bold.ttf'),
    unset: require('assets/fonts/Quicksand-Medium.ttf'),
  });

Hope that helps

felix-lambert on Feb 20, 2024

@anthonyn60 @jordam1407 In initializing your fonts, just add “unset” key and add your default font as value

const [loaded] = useFonts({
    Inter: require("@tamagui/font-inter/otf/Inter-Medium.otf"),
    InterBold: require("@tamagui/font-inter/otf/Inter-Bold.otf"),
    unset: require("@tamagui/font-inter/otf/Inter-Medium.otf") // default 
  });

junedomingo on Nov 30, 2023

Not sure if it’s related to the latest changes as well, but I’m getting the following error related to the “unset” keyword additions in the latest versions (according to the release notes):

 ERROR  fontFamily "unset" is not a system font and has not been loaded through Font.loadAsync.

- If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.

- If this is a custom font, be sure to load it with Font.loadAsync.

    at RCTText
    at Text (http://10.88.111.9:8081/index.ts.bundle//&platform=ios&dev=true&hot=false&lazy=true:105702:27)
    at anonymous (http://10.88.111.9:8081/index.ts.bundle//&platform=ios&dev=true&hot=false&lazy=true:189129:58)
    at RCTView
    at View (http://10.88.111.9:8081/index.ts.bundle//&platform=ios&dev=true&hot=false&lazy=true:40301:43)
    at RCTView

This happens when I use Expo Go on iOS 17. I’m on the latest version of Tamagui (1.79.1)

There could be something odd happening with defaults and this keyword?

anthonyn60 on Nov 29, 2023

It seems that font explicitly does not inherit color and font properties. My team uses SizableText as the default text https://tamagui.dev/docs/components/text/1.0.0

hackily on Nov 27, 2023