Custom Fonts - Rendering Different On Each Platform

[thorbenprimke]

I was trying to set up a custom font and I believe I followed the instruction correctly. But the two font weights are not rendering as expected.

Basically I setup a custom font with a normal weight and a bold weight

const fontName = 'happySans'
const theme = makeTheme({
  customFonts: {
    fontName: {
      bold: 'happyBold',
      default: fontName,
      normal: fontName,
      400: fontName,
      500: fontName,
      600: 'happyBold',
      700: 'happyBold',
      800: 'happyBold',
      900: 'happyBold',
    },
  },
  fonts: {
    root: fontName, // <- this string must match the key you set in custom fonts above!
  },

And then I setup variants for text:

    body: {
      color: 'red',
      fontSize: 28,
    },
    bodyAndBold: {
      color: "black",
      fontSize: 28,
      fontWeight: "700",
    },

For the bodyAndBold, I expected the font to render bold given the 700 weight. However on Web this renders the normal font with bold weight, on iOS it just renders the normal font and on Android it renders the system default.

Did I not follow the steps correctly? It seems that fonts.root is not actually set to the customFonts.fontName but just fontName.

I pulled the full code showcasing this into this snack: https://snack.expo.dev/@howwefeel/intrigued-chocolates This uses 3.0 but I also tried it with 2.3.6 and it had the same result.

Web	iOS	Android

[nandorojo]

Thanks for the clear repro. Mind if I take a look tomorrow? Should be an easy fix.

[nandorojo]

Oh lol I see the issue. It should be customFonts: [fontName]

Instead you passed the literal string fontName as the key in customFonts

[nandorojo]

So you should have theme.customFonts.happySans. Are the docs wrong on that? Let me look

[nandorojo]

Nope docs are correct. Notice the brackets around [fontName], which means the key is a variable.

[nandorojo]

@thorbenprimke let me know if you tried the fix

[thorbenprimke]

@nandorojo - thanks for taking a quick look.

Yes, the docs - https://www.dripsy.xyz/fonts - show both with and without brackets. I had tried with brackets as well.

---

I just verified that adding the brackets does not fix it. Snack is updated with brackets now.

---

I dug a bit deeper. I think I found what is not working as expected and that is defining a custom variant with a fontWeight.

Code	Web

Based on this, the custom variant should work as defined.

I'm happy to fix up the docs if all the example on the font page should have brackets and add a snippet to the example.

[nandorojo]

Hmm okay got it, I’ll get it figured out tomorrow

[nandorojo]

I'm finding this a bit hard to debug with this font, since it's default bold, and I'm not sure what it should look like at each weight

[nandorojo]

Okay yeah I see that something here is wrong.

[nandorojo]

I'm going to try with a different font, because I can't tell from looking at this.

[nandorojo]

I reproduced it here: https://snack.expo.dev/@nandorojo/thankful-croissant

It seems that if you pass fontFamily: 'root' to your text variant, everything works properly. This should not be necessary, so it is a bug. My guess is that something in Dripsy is ignoring the default text style when you apply a variant. Very odd.

@thorbenprimke good catch. For now, you can add fontFamily: 'root' to your variants, and that should solve it. I'm going to look into this now, though, and will let you know when I solve it.

Code Here

```tsx import * as React from 'react'; import { DripsyProvider, makeTheme, Text, Container } from 'dripsy'; import { useFonts } from 'expo-font'; export function Fonts({ children }) { const [loaded] = useFonts({ dripsy: require('./Inter/static/Inter-Regular.ttf'), dripsyBold: require('./Inter/static/Inter-Bold.ttf'), }); return <>{loaded && children}; } const fontName = 'dripsy'; const theme = makeTheme({ customFonts: { [fontName]: { 400: fontName, default: fontName, normal: fontName, 500: 'dripsyBold', 600: 'dripsyBold', bold: 'dripsyBold', 700: 'dripsyBold', 800: 'dripsyBold', 900: 'dripsyBold', }, }, fonts: { root: fontName, }, text: { body: { // fontFamily: 'root' }, bold: { fontWeight: 'bold', }, boldWithRoot: { fontWeight: 'bold', fontFamily: 'root', }, }, layout: { container: { p: 16, }, }, }); export default function App() { return ( ✅ This should be "dripsy" font 🚨 This should be "dripsyBold" font ✅ This should be "dripsyBold" font ✅ This should be "dripsyBold" font ); } ```

[nandorojo]

Fixed and released in 3.0.3!

yarn add dripsy

Thanks for finding this @thorbenprimke, your examples were very helpful.

[nandorojo]

Here is a video showing the fix on your repro after I update. Before, it used happySans and fontWeight: 700. After, it uses happyBold:

https://www.loom.com/share/af9eda1c06374d7980c79d85ec9a877d

[nandorojo]

Added the working example to the docs: https://www.dripsy.xyz/fonts#example

I should probably improve the later parts of that page to use the variable name for the font too.