fontFamily="$mono" warning in Expo

[nephix]

Current Behavior

When using `$mono" as fontFamily there's a warning from Expo:

fontFamily ""ui-monospace", "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace" is not a system font and has not been loaded through expo-font.

Expected Behavior

I'm not sure, maybe it's ok to just ignore it? If not, a couple of options:

1. Tamagui is loading the font
2. There's a section in the docs about what fonts to load via expo-font

Is there a way to fix that warning? Currently, expo-font is loading the following from the docs:

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

and in

node_modules/@tamagui

I can't see another font family from the warning to load

Tamagui Version

^1.95.1

Platform (Web, iOS, Android)

iOS

Reproduction

<Text fontFamily="$mono">
    Some text
</Text>

System Info

System:
    OS: macOS 14.4.1
    CPU: (8) arm64 Apple M1
    Memory: 58.28 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.17.0 - ~/.nvm/versions/node/v18.17.0/bin/node
    Yarn: 4.1.1 - ~/.yarn/bin/yarn
    npm: 10.5.0 - ~/Projects/.../node_modules/.bin/npm
    pnpm: 8.15.3 - ~/Library/pnpm/pnpm
    bun: 1.1.6 - ~/.bun/bin/bun
    Watchman: 2024.04.29.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 124.0.6367.119
    Safari: 17.4.1
  npmPackages:
    typescript: ^5.1.3 => 5.4.5

[FranciscoKloganB]

I had a similar issue with Poppins. I created a createPoppins helper exactly like the ones I saw on Tamagui packages and used it as { fonts: { body } }.

I'm new to React Native and to Tamagui. I wish the documentation was more explicit on how to set up, how things work, how to customize parts of the theme.  Alas, after spending some time going through the docs, configuration, and application flow I came to understand the issue. So, @nephix, the error is telling you that there is no font associated with monospace. You will need to add one additional entry to your useFonts hook: 'ui-monospace': require('path/to/my/monospace-font').

@natew I might be a bit out of reach, but I feel like it is difficult to adopt a technology like Tamagui if the documentation does not help you get started with the unique features provided by Tamagui. No matter how amazing the tools/features are. I know I can't compare apples to potatoes (web vs. native), especially because of the experience I accumulated on the web and certainly lack in native. However, onboarding PandaCSS which has a very similar philosophy to Tamagui and an equally high learning curve (gotta know how to represent a design system as code), was a breeze.

In retrospect before PandaCSS, I was a massive Tailwind user who barely ever touched real CSS except for punctual fixes or adjustments in big SaaS projects. I also faced some challenges on that framework, eventually, but mostly on very very advanced use cases and never on "getting started".

In short, I really think documentation is the highest barrier to adoption and simultaneously the biggest risk for churn Tamagui will face in the medium term. Time may prove me wrong, especially, if Studio comes out well. However, before investing too much in Studio and Takeout and Bento, all at once. Consider adding better documentation. Extensive API details and most of all more helpers/builder functions to the createThemeBUilder. Let me know if there's any way I can contribute or help with anything.

Edit: We need more guides like this oen https://tamagui.dev/docs/guides/how-to-build-a-button

[SamuraiF0x]

Hi @nephix, you need to import the new font first. I think the easiest way to do this is to use useFont from expo and google font.
You can find a full list of google fonts here.
Please refer to docs for more info.

Thank you for your feedback @FranciscoKloganB, did you check expo docs recently? I've made changes especially to the font section where you can switch between internal tamagui font or expo google font. Let me know if something can be made more clear :)

[nephix]

But $mono is a pre defined tamagui token. Shouldn't it already be included then?

[SamuraiF0x]

You still need to load it here:

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