set google fonts on labelFontName property.

4 posts, 0 answers
  1. andre
    andre avatar
    12 posts
    Member since:
    Oct 2012

    Posted 29 Nov 2017 Link to this post

    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?

  2. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    329 posts

    Posted 01 Dec 2017 Link to this post

    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
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  3. andre
    andre avatar
    12 posts
    Member since:
    Oct 2012

    Posted 02 Dec 2017 in reply to nikolay.tsonev Link to this post

    Hi,

    Thanks.

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

    Best regards

  4. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    329 posts

    Posted 04 Dec 2017 Link to this post

    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 workaround it.

    Regards,
    nikolay.tsonev
    Progress Telerik
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
Back to Top