How to include multiple weights of the same font on NativeScript?

Question

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 believe for Android - it has to match the filename. Also the files have to be in app/fonts folder. — dashman, Jan 12 '18 at 16:14
I get that, I just don't see how that can be reconciled with the iOS font-family requirement, for multiple weights of the same font. — Aaron, Jan 12 '18 at 22:44

score 3 · Answer 1 · edited Oct 10 '20 at 14:12

I believe the best approach here would be to use @font-face to create a font-family composed of all your files.

If I had three weights of a font, and wanted to build a family out of them, I would do it like so:

@font-face {
    font-family: 'Open Sans';
    src: url('~/fonts/Open Sans Regular.tff') format('truetype');
    font-weight: 300;
}

@font-face {
    font-family: 'Open Sans';
    src: url('~/fonts/Open Sans Light.tff') format('truetype');
    font-weight: 100;
}

@font-face {
    font-family: 'Open Sans';
    src: url('~/fonts/Open Sans Bold.tff') format('truetype');
    font-weight: 500;
}

I can then use this else where via:

Label {
    font-family: 'Open Sans';
    font-weight: 300; // Regular Open Sans
}

Label.mod-light {
    font-weight: 100; // Light Open Sans
}

Label.mod-bold {
    font-weight: 500; // Bold Open Sans
}

Benefit of this approach is that you don't need to add further properties to your css or HTML to support font weights dependent on each device.

score 0 · Accepted Answer · answered Feb 02 '18 at 23:21

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.

How to include multiple weights of the same font on NativeScript?

2 Answers2