Custom WOFF font not working on Android? Here’s why.

Building an app is one thing, but creating a unique user experience and meaningful design choices is what makes some apps great. Deliberate font choice can take your app to the next level, but it sometimes requires importing custom fonts. While building Voluntime’s mobile application for iOS and Android using React Native, I came across a problem while adding my custom font to the project.

The font simply wasn’t changing. The default Roboto font wasn’t going away. Here’s the story and how I fixed it.

Since it was my first time using custom fonts, I wanted to do it right. I researched many font formats and came to the conclusion that WOFF2 was best for me. It offers better compression and it’s just an improved version of the previous WOFF format. I downloaded the font and added them to my iOS project relatively painlessly, and it worked immediately.

Pleased with the results, I moved onto my Android project. After installing the font and rebuilding my app, nothing had changed. I had installed the font properly according to the documentation and there were no error messages or warnings. So, what happened?

After some research, I found an article claiming that the font formats supported on Android are TTF, OTF, and TTC, while iOS supports TTF, OTF, WOFF (iOS 10+), WOFF2 and (iOS 10+). I was using WOFF2, so this explains why it worked on iOS and not Android!

To convert my WOFF2 font to an Android-supported format, I simply used an online WOFF2 to TTF converter.

Finally, I replaced my WOFF2 font files with the new TTF ones, and I ran a project-wide search for the phrase “woff”. I replaced anything that referenced my WOFF2 font with its TTF counterpart.