Flutter Font rendering has weird spacing

546 views Asked by At

In my latest flutter project the fonts I am using seem to be not rendering correctly - there is a weird spacing sometimes between some letters, like in the example below.

This is the correct render from Figma:

As you can see, the letter spacing is perfect

This is the weird flutter render:

As you can see, the spacing between 'z' and 'i' plus 'zi' and 'n' is just off...

These are the TextStyles I am using:

class SneadFonts {
  // Snead Title Font
  static TextStyle TITLE_LARGE() {
    return const TextStyle(
      fontFamily: 'Figtree',
      fontWeight: FontWeight.w700,
      fontSize: 48,
      //height: 57,
      color: COLOR_BLACK,
    );
  }

  static TextStyle TITLE_MEDIUM() {
    return const TextStyle(
      fontFamily: 'Figtree',
      fontWeight: FontWeight.w700,
      fontSize: 30,
      ////height: 36,
      color: COLOR_BLACK,
    );
  }

  static TextStyle TITLE_MEDIUM_BLACK() {
    return const TextStyle(
      fontFamily: 'Figtree',
      fontWeight: FontWeight.w900,
      fontSize: 30,
      ////height: 36,
      color: COLOR_BLACK,
    );
  }

  static TextStyle TITLE_SMALL() {
    return const TextStyle(
      fontFamily: 'Figtree',
      fontWeight: FontWeight.w700,
      fontSize: 20,
      //height: 24,
      color: COLOR_BLACK,
    );
  }

  static TextStyle TITLE_SMALL_EXTRABOLD() {
    return const TextStyle(
      fontFamily: 'Figtree',
      fontWeight: FontWeight.w800,
      fontSize: 20,
      //height: 24,
      color: COLOR_BLACK,
    );
  }

  static TextStyle TITLE_SMALL_BLACK() {
    return const TextStyle(
      fontFamily: 'Figtree',
      fontWeight: FontWeight.w900,
      fontSize: 20,
      //height: 24,
      color: COLOR_BLACK,
    );
  }

  static TextStyle HEADLINE_1_SEMIBOLD() {
    return const TextStyle(
      fontFamily: 'Figtree',
      fontWeight: FontWeight.w600,
      fontSize: 18,
      //height: 21,
      color: COLOR_BLACK,
    );
  }

  static TextStyle HEADLINE_1_BOLD() {
    return const TextStyle(
      fontFamily: 'Figtree',
      fontWeight: FontWeight.w700,
      fontSize: 18,
      //height: 21,
      color: COLOR_BLACK,
    );
  }

  static TextStyle HEADLINE_2_SEMIBOLD() {
    return const TextStyle(
      fontFamily: 'Figtree',
      fontWeight: FontWeight.w600,
      fontSize: 16,
      //height: 19,
      color: COLOR_BLACK,
    );
  }

  static TextStyle HEADLINE_2_BOLD() {
    return const TextStyle(
      fontFamily: 'Figtree',
      fontWeight: FontWeight.w700,
      fontSize: 16,
      //height: 19,
      color: COLOR_BLACK,
    );
  }

  static TextStyle BODY_REGULAR() {
    return const TextStyle(
      fontFamily: 'Figtree',
      fontWeight: FontWeight.w400,
      fontSize: 16,
      //height: 19,
      color: COLOR_BLACK,
    );
  }

  static TextStyle BODY_MEDIUM() {
    return const TextStyle(
      fontFamily: 'Figtree',
      fontWeight: FontWeight.w500,
      fontSize: 16,
      //height: 19,
      color: COLOR_BLACK,
    );
  }

  static TextStyle BODY_SEMIBOLD() {
    return const TextStyle(
      fontFamily: 'Figtree',
      fontWeight: FontWeight.w600,
      fontSize: 16,
      //height: 1.2,
      color: COLOR_BLACK,
    );
  }

  static TextStyle BODY_BOLD() {
    return const TextStyle(
      fontFamily: 'Figtree',
      fontWeight: FontWeight.w700,
      fontSize: 16,
      //height: 19,
      color: COLOR_BLACK,
    );
  }

  static TextStyle BODY_SMALL_REGULAR() {
    return const TextStyle(
      fontFamily: 'Figtree',
      fontWeight: FontWeight.w400,
      fontSize: 14,
      //height: 17,
      color: COLOR_BLACK,
    );
  }

  static TextStyle BODY_SMALL_MEDIUM() {
    return const TextStyle(
      fontFamily: 'Figtree',
      fontWeight: FontWeight.w500,
      fontSize: 14,
      //height: 17,
      color: COLOR_BLACK,
    );
  }

  static TextStyle BODY_SMALL_SEMIBOLD() {
    return const TextStyle(
      fontFamily: 'Figtree',
      fontWeight: FontWeight.w600,
      fontSize: 14,
      //height: 17,
      color: COLOR_BLACK,
    );
  }

  static TextStyle BODY_SMALL_BOLD() {
    return const TextStyle(
      fontFamily: 'Figtree',
      fontWeight: FontWeight.w700,
      fontSize: 14,
      //height: 17,
      color: COLOR_BLACK,
    );
  }

  static TextStyle BODY_TINY_REGULAR() {
    return const TextStyle(
      fontFamily: 'Figtree',
      fontWeight: FontWeight.w400,
      fontSize: 12,
      //height: 15,
      color: COLOR_BLACK,
    );
  }

  static TextStyle BODY_TINY_BOLD() {
    return const TextStyle(
      fontFamily: 'Figtree',
      fontWeight: FontWeight.w700,
      fontSize: 12,
      // letterSpacing: -0.036,
      color: COLOR_BLACK,
    );
  }

  static TextStyle BODY_TINY_BLACK() {
    return const TextStyle(
      fontFamily: 'Figtree',
      fontWeight: FontWeight.w900,
      fontSize: 12,
      //height: 15,
      color: COLOR_BLACK,
    );
  }
}

I already tried to import the font, which is Figtree in several ways - ttf format, otf format and even using the GoogleFonts Package - none worked... Is it a problem of Flutter in general? Is there any workaround? Trial-And-Error changing the letter-spacing for some TextStyles is looking real bad...

0

There are 0 answers