Why does my custom font on iOS cause leading characters to go missing (and not apply the font)?

179 Views Asked by At

On my Flutter app, I implemented a custom text theme using 2 fonts that I stored in assets/ as instructed here. (These instructions, while different, are also generally helpful.)

I got everything working on Android (I develop on Windows mostly), and I shifted over to Mac to get it working on iPhone. I saw the screenshot below:

iOS Flutter app screenshot with first three or so letters missing from each text line. Default iPhone font used.

Note that "Wel" is missing from "Welcome!" as well as the early characters of "Thanks" and "Here's", and an emoji is completely gone. In addition, that's the default iPhone font, so my custom font didn't load.

What's going on?

1

There are 1 best solutions below

0
Ross Llewallyn On BEST ANSWER

BLUF: fix your *.ttf line endings

I figured this out but didn't see anyone else with answers, so I thought I'd share.

As usual when swapping to and from Windows, line endings turned out to be the culprit. I installed the font files on Windows, and apparently my Git settings are such that on Mac the files couldn't be read. A clue was in trying to open the *.ttf file in Android Studio on Mac and seeing that it didn't display the font.

I re-downloaded the files on Mac, replaced them, and everything worked immediately (after deleting the app completely from the test device to be safe).

I don't know why early characters weren't being displayed on some lines (but not all), but that was also fixed by having valid font files.