Adding Local Fonts to React and React Native

Many of us like to implement some of our Local fonts to our react native app. For me, I wanted to implement my native language (Uyghur) .ttf (true type format) fonts to the projects that I was planning to build with Expo with React-Native.

So let’s get into our point.

After you create your React-Native project, let’s say it’s called test-fonts

Once we got the project setup and have the simulator running, then we can start doing the edit on the app.js file, typically you will want to load your apps primary fonts before the app is displayed to avoid text flashing in after the font loads. The recommended approach is to move the Font.loadAsync call to your top-level component.

So here is how our Starting code:

Then put the custom font file in the test-fonts/assets/fonts directory.

For us to be able to load the font into our Native App, the first thing we have to connect to the font using Expo SDK, font loader.

so on top of our app.js file

Then we will be using component lifecycle methods to load the fonts.

Still, we might have a small issue, due sometimes we have some delay on reading the font-file. There might be a “Flash” font change situation. due to that we can set up a local state on the application for verifying the font was loaded or not, then we can do conditional rendering with, once font loaded then start the component mounting on the view on our App.

For using the font, we can add in to our style tag, as normal using the other fronts.

Related posts:

While not an ideal site for fiction, Medium nonetheless carries many authors who are very talented in fiction, if one knows but where to look. For my first offering to Best of Three, I’d like to…

Looking to bring the fierce and powerful character of Nezuko Kamado to life in your Demon Slayer cosplay? Look no further than our Demon Slayer Nezuko Kamado Cosplay Contact Lenses! These colored…

When I sent the chord progression to Hennie , it was really messy.. didn't expect him to transform such a messy chord progression to something that keeps my head bugging. Something striking happened…