set google fonts on labelFontName property.

[andre]

Hi,
I use the Questrial-Regular on my app, all nativescript components is using this font style, but i'm unable to style dataform to use the font.

This is my code:
app.css
* {
font-family: Questrial-Regular, questrial-regular-webfont !important;
}

 

My dataform html
<RadDataForm tkExampleTitle tkToggleNavButton #newServerForm [source]="newServer" (editorUpdate)="onSet($event)">
<TKEntityProperty tkDataFormProperty name="port" displayName="{{ 'msg_port' | translate }}" index="2">
<TKPropertyEditor tkEntityPropertyEditor type="Number"><TKPropertyEditorStyle tkPropertyEditorStyle labelFontStyle="red"></TKPropertyEditorStyle></TKPropertyEditor>
<TKNonEmptyValidator tkEntityPropertyValidators errorMessage="{{ 'msg_error_port_empty' | translate }}"></TKNonEmptyValidator>
</TKEntityProperty>
</RadDataForm>

My dataform component
public onSet(args) {
this._portEditor.propertyEditorStyle.labelFontName = "Questrial-Regular";
this._portEditor.propertyEditorStyle.labelTextSize = 20;
this._portEditor.propertyEditorStyle.labelTextColor = "orange";
   }

I'm able to change the font color and size but not the fontname.
I already try with different name like  Questrial, questrial-regular, questrial.

Can you help me on this?

[Nikolay Tsonev]

Hi,

Thank you for your interest in UI for NativeScript.
I tested your case with adding custom fonts for the Dataform labels. while specifying the needed font in iOS you should provide the only the font name and for the Android, you should provide a file name. This could be done by using a platform-specific definition for the labelFontName property, For example:

<TKEntityProperty tkPropertyGroupProperties name="name">
          <TKPropertyEditor tkEntityPropertyEditor type="Text">
              <TKPropertyEditorStyle tkPropertyEditorStyle strokeColor="#00695c" strokeWidth="2" fillColor="#4db6ac" labelHidden="false"
                  labelTextSize="18" android:labelFontName="Questria-Regular" ios:labelFontName="Questria"
                  labelPosition="Left" labelWidth="60" labelTextColor="#00695c"></TKPropertyEditorStyle>
          </TKPropertyEditor>
      </TKEntityProperty>

However, while testing, we found that at this time the custom font will not be applied to Android. Regarding that, we have logged new issue here and you could keep track on it for further info.


Let me know if I could assist you further.

Regards,
nikolay.tsonev
Progress Telerik

[andre]

Hi,

Thanks.

For now there is some workaround to solve it? Like forcing the font on CSS under  some dataform class?

Best regards

[Nikolay Tsonev]

Hi Andre,
We discussed this issue with the UI for NativeScript team, however at this time we were unable to find a workaround, which could allow applying custom font for Android.
At this time I would suggest tracking the issue and we will update it if we have some further info about the case or possible way to it.

Regards,
nikolay.tsonev
Progress Telerik