Skip to content

[Bug]: Variable fonts don't work #120

@alizahid

Description

@alizahid

What happened?

I'm loading variable fonts on iOS with expo-font and its config plugin. Using React Native's Text component, I'm able to set the font weight to light or bold. But with NitroText, the font weight has no effect.

Image

I'm using uniwind with React Native Text but adding fontFamily and fontWeight to style for NitroText doesn't work either.

Steps to reproduce

  1. Install expo-font
  2. Load some variable font (eg, Inter)
  3. Set fontFamily and fontWeight styles on NitroText

Code sample

import { NitroText } from 'react-native-nitro-text'
import { withUniwind } from 'uniwind'

const Component = withUniwind(NitroText)

function Page() {
  return (
    <View className="flex-row w-full gap-4 justify-between px-8">
      <View className="gap-2">
        <Text className="text-gray-11 text-sm">Text</Text>

        <Text className="font-light">Light</Text>
        <Text>Regular</Text>
        <Text className="font-medium">Medium</Text>
        <Text className="font-bold">Bold</Text>
      </View>

      <View className="gap-2">
        <Component className="font-sans text-gray-11 text-sm">
          NitroText
        </Component>

        <Component className="font-sans text-base text-gray-12 font-light">
          Light
        </Component>
        <Component className="font-sans text-base text-gray-12">
          Regular
        </Component>
        <Component className="font-sans text-base text-gray-12 font-medium">
          Medium
        </Component>
        <Component className="font-sans text-base text-gray-12 font-bold">
          Bold
        </Component>
      </View>
    </View>
  )
}

Environment

React Native 0.81.5, Expo 54.0.23, expo-font ~14.0.9

Checklist

  • I have searched existing issues
  • I have provided a minimal reproduction case

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions