Android font files (same font, different weight) not applied

nativescriptcore
#1

Hi, I have two weights of the same font.

Per @NickIliev’s answer at https://stackoverflow.com/a/41678274/877682, I see that the file name must match the font name on Android, so I named them [Font name] Regular.ttf" and “[Font name] SemiBold.ttf”.

I’m trying to include the semi-bold via

font-family: [Font name];
font-weight: 600;"

However, Android can’t find it, and it’s defaulting to a sans-serif font (which I assume is Roboto).

What’s the expected font file naming system in this case? Do I need to create separate android and ios CSS files, and then simply name use font-family: [Font name] Semibold; on android?

#2

To make the fonts work on both iOS and Android at the same time, then you name the font file to the original font name. I don’t know the original names of the font you are using, so I will give an example for material icons font:

  • the font file originally named MaterialIcons-Regular.ttf
  • however the font name is Material Icons
  • so i rename the file to Material Icons.ttf
    and in the css file
.mi {
    font-family: "Material Icons";
 }

now it works perfectly for both iOS and android. I hope this helps.

note: on mac you can open the font file in Font Book app, and get the font name

#3

How does this work for multiple weights, though?

If I have Regular and SemiBold of the same font, they can’t have the same name…

#4

I’ve created this Stack Overflow question with my question: https://stackoverflow.com/questions/48183266/how-to-include-multiple-weights-of-the-same-font-on-nativescript-android

#5

I’ve now added a Stack Overflow bounty to the question, hoping that there’s a way around creating separate ios and android CSS files everywhere we use font-face declarations.

#6

I’ve updated my SO question with how I wound up implementing this. It’s not pretty, but it gets the job done: https://stackoverflow.com/a/48592252/877682