Nativescript: Font-family Not Loading On Android

I imported a set of files for Galano Grotesque xxx.otf font (xxx=Alt Black, Alt Black Bold, etc), and it works like a charm on iOS but not on Android. When I run the app on Android

Solution 1:

There is one primary consideration when working with fonts in iOS and Android. For the font to work on iOS it should use the exact font name (notice that this is not the file name!) where in Android the font should be referenced with its particular file name.

Example: Let's assume you are using the Galano Grotesque DEMO Bold font from here (this one is free for demonstration purposes) When downloaded you will see that the file name is as follows

Rene Bieder - Galano Grotesque DEMO Bold.otf

But the font name is (in Mac open with FontBook app to see the font-name at the top of the pop-up.. for Windows open the font with Windows Font Viewer and look for font name)

Galano Grotesque DEMO

So to use it in iOS, you should use

font-family: "Galano Grotesque DEMO";

And for Android, you should use

font-family: "Rene Bieder - Galano Grotesque DEMO Bold";

Of course, the best practice is to see what is the actual font name and rename the file with the exact name so you can reuse it in both iOS and Android with no different CSS files.

All that said check your file name under Android and make sure that reference in the CSS file is the same