Rendering a custom Arabic font in my Flutter application

Help General
1

Hi everyone,

I’m encountering an issue with rendering a custom Arabic font in my Flutter application. The text appears with separated letters rather than correctly joined script, which is essential for proper Arabic typography.

This issue started occurring after I updated Flutter to the latest version. Before the update, the same font rendered perfectly with correctly joined letters.

here my font AALMAGHRIBI.ttf - Google Drive

here extract of my code
Text(
//‘$_counter’,
‘مرحبا بالعالم’,
//style: Theme.of(context).textTheme.headlineMedium,
style: TextStyle(
fontFamily: ‘muhammadi’,
fontSize: 20,
//fontFeatures: [FontFeature.enable(‘liga’)], // Enable ligatures if needed.
),
textDirection: TextDirection.rtl,
),

notice please that i have tested with richtext and textspan, but that doesn’t resolve the problem

issu
issu233×101 4.72 KB

appreciate any suggestion
thinks

1 Like
2

If this started with the latest release please file an issue on the Flutter repository.
Especially because the Flutter team isn’t a regular user of Arabic fonts they probably don’t know that there is now a problem.

2 Likes
3

My app was working fine with Flutter 2.x (specifically 2.6), but after upgrading to version 3.x, the issue with Arabic fonts started occurring. it seems to be a regression with the latest release.

2 Likes