3

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 the font is not loaded.

I'm using this:

Label {
    font-family: "Galano Grotesque";
    color: #5b5b5f;
}

I found this post - Android Not Showing Font Icon In NativeScript - and I tried this

Label {
    font-family: "Galano Grotesque", galano grotesque;
    color: #5b5b5f;
}

but without success :(

Does anybody knows what I can do to solve it?

Thanks

Community
  • 1
  • 1
Leandro Bortolotto
  • 111
  • 1
  • 10
  • Leandro if this is a private font can you share the font files with me to inspect why it's not loading. A rough approach to solve would be make all possible variations of styles for the font family. Wrap quotes around the font, without quotes, remove the space in the name with quotes (and without). So you cover all variations of the font name. If I could open the font file you can see the actual name. Also is it .ttf ? – Brad Martin Jan 14 '17 at 23:09

1 Answers1

5

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

Nick Iliev
  • 9,610
  • 3
  • 35
  • 89
  • 1
    How does this jive with having multiple weights of the same font? I've got "[Font name] Regular.ttf" and "[Font name] SemiBold.ttf", and I'm trying to include the semi-bold via "font-family: [Font name]; font-weight: 600;", but Android can't find it. – Aaron Jan 05 '18 at 10:34