androidfontsfont-facenativescriptandroid-fonts

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


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?


Solution

  • 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.