Home > Mobile >  React Native Disable Ligatures
React Native Disable Ligatures

Time:12-11

Is there anyway to prevent Ligatures from happening in React Native applications?

We are using font "Roobert" which is combining letters "f" and "i" into a ligature.

      <Text
        style={{
          fontFamily: "roobert",
        }}
      >
        Profile
      </Text>

React Native ligature

It also seems to happen with increased letter spacing.

Ligature with increased letter spacing

I would just like to have normal "profile" text without ligatures.

CodePudding user response:

U 200B character can be used to remove this.

By adding U 200B character in between the characters that would from the ligature, you can prevent ligature from forming.

So: Prof​ile (has invisible char)

instead of: Profile

https://unicode-table.com/en/200B/

  • Related