Feature Request: Resolve font family + font weight + font style to different font families

[tobimori]

font-sans font-medium italic works on web, but falls back to the system font on native when using custom font files (tested with Expo Font, it might vary per system).

On native, Uniwind currently resolves this roughly as:

{
	fontFamily: "Inter_400Regular",
	fontWeight: "500",
	fontStyle: "italic",
}

For React Native custom fonts, this often fails because each font file is registered as a separate family. Native does not reliably resolve Inter_400Regular + 500 + italic into Inter_500Medium_Italic.

The native output needs to become:

{
	fontFamily: "Inter_500Medium_Italic",
}

Suggested theme convention:

@theme {
	--font-sans: "Inter Variable", sans-serif; /* this would only apply on web, where we don't resolve the below variables */

	--font-sans--400: "Inter_400Regular";
	--font-sans--400--italic: "Inter_400Regular_Italic";

	--font-sans--500: "Inter_500Medium";
	--font-sans--500--italic: "Inter_500Medium_Italic";

	--font-sans--600: "Inter_600SemiBold";
	--font-sans--600--italic: "Inter_600SemiBold_Italic";
}

Expected native resolution:

<Text className="font-sans" />
// -> --font-sans--400

<Text className="font-sans italic" />
// -> --font-sans--400--italic

<Text className="font-sans font-medium" />
// -> --font-sans--500

<Text className="font-sans font-medium italic" />
// -> --font-sans--500--italic

<Text className="font-sans font-semibold italic" />
// -> --font-sans--600--italic

If the exact variant variable exists, Uniwind should use that as fontFamily on native and avoid emitting fontWeight/fontStyle for that resolved custom font variant. If no matching variant variable exists, current behavior can remain unchanged.

This keeps web behavior natural while making React Native custom fonts work without needing explicit classes like font-sans--500--italic everywhere.

[github-actions]

This issue has been automatically closed because it lacks a clear, minimal reproduction that we can use to verify the reported bug.

[Brentlok]

Thanks for the detailed report and for laying out the proposed convention. I understand the issue, but I don’t think Uniwind should solve this by introducing its own native-only font variant resolution layer. Uniwind’s responsibility is to convert classNames/CSS into React Native style objects.

React Native / the font provider should be responsible for resolving that family + weight + style combination to the correct native font file.

Expo already supports this on Android via font definitions, for example:

"fonts": [
  {
    "fontFamily": "Inter",
    "fontDefinitions": [
      {
        "path": "./assets/fonts/Inter-BoldItalic.ttf",
        "weight": 700,
        "style": "italic"
      },
      {
        "path": "./assets/fonts/Inter-Bold.ttf",
        "weight": 700
      }
    ]
  }
]

That model matches how fonts work on the web: one family with multiple weights/styles, rather than every file becoming a separate utility-level family that Uniwind needs to pick manually.

Adding support for variables like - --font-sans--500--italic would effectively make Uniwind patch over platform/font-registration behavior and introduce a second font resolution system. That feels outside the scope of the library.

[tobimori]

As far as I'm aware, your suggested approach only works on Android and not on iOS

[Brentlok]

As far as I'm aware, your suggested approach only works on Android and not on iOS

That's right, just like I've said:

Expo already supports this on Android