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...