Nativescript: `FontWeight` will not be applied to the text for both iOS and Android

[tsonevn]

In case you would like to set fontWeight to the text using some of the available options, the style will not be apply. The problem is reproducible for both Android and iOS.

Example:
main-page.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">
  <StackLayout>

    <Label fontSize="15" class="textweight" text="Tap the button"/>
    <Button class="textweight" text="tap" tap="onTap" />
    <TextField class="textweight"  text="sample text - textfield" />


    <Label fontFamily="sans-serif"  fontWeight="bold" text="Tap the button2"/>
    <Button fontFamily="sans-serif"  fontWeight="bold" text="tap" tap="onTap2" />
    <TextField fontFamily="sans-serif"  fontWeight="bold"  text="sample text - textfield2" />

  </StackLayout>
</Page>

app.css

.textweight{
    font-family: "sans-serif";
    font-weight:"extraBold";
}

tns-core-modules:2.2.0
tns-ios:2.2.1
CLI: 2.2.1

[hamorphis]

@tsonevn There is no such CSS value for font weight "extraBold". Use the correct CSS value, in this case 800. Also, CSS values should not be enclosed in quotes.

.textweight{
    font-family: sans-serif;
    font-weight: 800;
}

Here are the valid CSS values for font-weights:
http://www.w3schools.com/cssref/pr_font_weight.asp
//- normal(same as 400)
//- bold(same as 700)
//- 100(Thin) (API16 -thin)
//- 200(Extra Light / Ultra Light) (API16 -light)
//- 300(Light) (API16 -light)
//- 400(Normal)
//- 500(Medium) (API21 -medium)
//- 600(Semi Bold / Demi Bold) (API21 -medium)
//- 700(Bold) (API16 -bold)
//- 800(Extra Bold / Ultra Bold) (API16 -bold)
//- 900(Black / Heavy) (API21 -black)

Also, the View class does not have fontFamily and fontWeight properties. They are properties on the Style class. So you should use them like this when setting them from XML:

<Label style.fontFamily="sans-serif"  style.fontWeight="bold" text="Tap the button2"/>

Third, not all fonts have all the exotic font-weights like semi-bold and extra-bold. When they do not have them they will fallback to the closest weight that they have, which in this case will be bold.

[hamorphis]

You can test all fonts by running the UI Tests App -> fonts -> all-fonts. You will see all available fonts in their different variants. Here is the source code that generates the page:

https://github.com/NativeScript/NativeScript/blob/master/apps/app/ui-tests-app/font/all-fonts.ts

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.