font weight not being applied using dripsy's <Text>

[louisholley]

hey! using dripsy with solito - I've followed the guide in the docs to get custom fonts setup, and it's (mostly) working really nicely. I've got one instance where it's not working though, and I can't work out why...

in my theme file I've got:

const rootFontName = 'Work Sans'
const headingFontName = 'TT Norms Pro'

export const Fonts = ({ children }: { children: React.ReactNode }) => {
  const [loaded] = useFonts({
    [rootFontName]: require('../../../apps/next/public/fonts/WorkSans-Regular.ttf'),
    ['Work Sans Medium']: require('../../../apps/next/public/fonts/WorkSans-Medium.ttf'),
    ['Work Sans SemiBold']: require('../../../apps/next/public/fonts/WorkSans-SemiBold.ttf'),
    [headingFontName]: require('../../../apps/next/public/fonts/TT-Norms-Pro-Bold.ttf'),
  })
  if (!loaded) return null
  return <>{children}</>
}

const webFont = (
  font: string,
  modifier?: string // used by native only as we need to specify different font weights
) =>
  Platform.select({
    // e.g... change me!
    web: `${font}, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, Inter-serif`,
    default: `${font}${modifier ? ' ' + modifier : ''}`,
  })

const theme = makeTheme({
  // https://www.dripsy.xyz/usage/theming/create
  customFonts: {
    [rootFontName]: {
      bold: webFont(rootFontName, 'SemiBold'),
      default: webFont(rootFontName),
      normal: webFont(rootFontName),
      '400': webFont(rootFontName),
      '500': webFont(rootFontName, 'Medium'),
      '600': webFont(rootFontName, 'SemiBold'),
      '700': webFont(rootFontName, 'SemiBold'),
      '800': webFont(rootFontName, 'SemiBold'),
      '900': webFont(rootFontName, 'SemiBold'),
    },
  },
  fonts: {
    root: rootFontName,
  }
....

The reason for these modifiers is because I couldn't work out another way of defining each fontface via CSS in the next app with the same name (Work Sans) but then being able to get the native app to pick up these different font files based on the weight. anyway, this is all groovy, and I've got e.g.

 h3: {
    color: (theme) => theme.colors.$black,
    fontSize: [16, 18],
    fontWeight: '600',
    lineHeight: [24, 24],
  },
...

working perfectly with H3s -> it renders Work Sans SemiBold both on the web and native app. however, defining a text variant like this:

text: {
  button: {
      fontSize: [16, 18],
      fontWeight: '500',
      lineHeight: [24, 24],
   },
},
...

and using it like this

 <Text
          variant="button"
          sx={{
            textAlign: 'center',
          }}
        >
          Should be Work Sans Medium!
        </Text>

it renders Work Sans Medium on native, but it renders Work Sans Regular on web...in the inspector the font family is Work Sans and the font weight is 400.

I even tried this:

 <Text
          variant="button"
          sx={{
            fontWeight: '500',
            textAlign: 'center',
          }}
        >
          Should be Work Sans Medium!
        </Text>

which had no effect. the only thing i could do to get it to render the medium font was this

 <Text
          variant="button"
          // not working without this and i have no idea why...
          style={{ fontWeight: '500' }}
          sx={{
            textAlign: 'center',
          }}
        >
        Should be Work Sans Medium!
        </Text>

have you seen this before / do you have any idea why this might be? thanks so much in advance!

[nandorojo]

yeah I think we’re missing the font-face code on Web. I’ll try to add that when I get the chance. You just have to use font face CSS in _document, make every font normal weight and name it after its font file.

[petrusek]

Just today I've noticed +/- the same issue in a different context... on web, when fallback fonts are used before loading the custom font. Missing the css style font-weight (especially 900) made it look very different and the moment the proper font loaded, it was quite a "bold blink" 😅 ... so transforming fontWeight into font-family should not remove it, but have both.

Anyway, thank you for adding this on your todo-list 👍

[nandorojo]

closing in favor of #193