I have two weights of the same font.
Per https://stackoverflow.com/a/41678274/877682, I see that the font-family must match the file name on Android, so I named the font files [Font name] Regular.ttf" and "[Font name] SemiBold.ttf".
I then tried to include the semi-bold via
font-family: [Font name];
font-weight: 600;"
However, Android can't find it, 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?
I never found a way to do this without separate iOS and Android files, with font-family
definitions for each weight of the font on Android.
Since Android requires exact font file names, I can't use a default font for all labels and vary the font-weights accordingly, like I can on iOS.
app.css:
@import "~/platform.css"; /* Platform-dependent styles */
@import "~/app-common.css"; /* Platform-independent styles */
platform.ios.css:
/* Default font: used everywhere except classes below */
Label {
font-family: "My Body Font"; /* Exact font name */
}
.heading-1, .heading-2, .heading-2-subtext {
font-family: "My Display Font"; /* Exact font name */
}
platform.android.css:
.heading-1, .heading-2 {
font-family: "MyDisplayFont-Bold"; /* file name: MyDisplayFont-Regular-Bold.otf */
}
.heading-2-subtext {
font-family: "MyDisplayFont-Regular"; /* file name: MyDisplayFont-Regular.otf */
}
.heading-3 {
font-family: "MyBodyFont-SemiBold"; /* file name: MyBodyFont-SemiBold.otf */
}
.body-text {
font-family: "MyBodyFont-Regular"; /* file name: MyBodyFont-Regular.otf */
}
app-common.css:
.heading-1 {
font-size: 36;
font-weight: bold; /* Used by iOS, ignored by Android */
}
.heading-2 {
font-size: 24;
font-weight: bold; /* Used by iOS, ignored by Android */
}
.heading-3 {
font-size: 16;
font-weight: 600; /* semi-bold, Used by iOS, ignored by Android */
}
.body-text {
font-size: 14;
}
As I understand it, I could move all the font-weight
styles into platform-ios.css, as Android font weights are controlled by the font-family
declaration.
However, as I'm defining font-size
for each class in app-common.css anyway, also defining the font-weight
here makes more sense to me.