Apply fonts doesn't work CSS

3 posts, 0 answers
  1. Dimitar
    Dimitar avatar
    45 posts
    Member since:
    May 2014

    Posted 06 Sep Link to this post

    Hello , 

    I am trying to apply fonts , but seems doesn't  work or missed ssomething . 

    I have added to the folder "app\fonts" all of my needed fonts   .

    Inserted in app.css (see below)  ,

     but after that when I am trying to apply the font with it seems doesn't using the proper font : 

    <Button text="Login" tap="onTapLogin" marginTop="20" class="whitecolor" backgroundColor="#55D3FF"
    fontFamily="titillium-web-semi-bold" fontWeight="bold" />

     

    .font-awesome { font-family: "FontAwesome"; }
    .roboto-black { font-family: "Roboto-Black";}
    .roboto-black-italic { font-family: "Roboto-BlackItalic";}
    .roboto-bold { font-family: "Roboto-Bold";}
    .roboto-bold-italic { font-family: "Roboto-BoldItalic";}
    .roboto-italic { font-family: "Roboto-Italic";}
    .roboto-light { font-family: "Roboto-Light";}
    .roboto-light-italic { font-family: "Roboto-LightItalic";}
    .roboto-medium { font-family: "Roboto-Medium";}
    .roboto-medium-italic { font-family: "Roboto-MediumItalic";}
    .roboto-regular { font-family: "Roboto-Regular";}
    .roboto-thin { font-family: "Roboto-Thin";}
    .roboto-thin-italic { font-family: "Roboto-ThinItalic";}
    .titillium-web-black {font-family: "TitilliumWeb-Black";}
    .titillium-web-bold { font-family: "TitilliumWeb-Bold"; }
    .titillium-web-bold-italic { font-family: "TitilliumWeb-BoldItalic";}
    .titillium-web-extra-light { font-family: "TitilliumWeb-ExtraLight";}
    .titillium-web-extra-light-italic { font-family: "TitilliumWeb-ExtraLightItalic";}
    .titillium-web-italic { font-family: "TitilliumWeb-Italic";}
    .titillium-web-light { font-family: "TitilliumWeb-Light";}
    .titillium-web-light-italic { font-family: "TitilliumWeb-LightItalic";}
    .titillium-web-regular { font-family: "TitilliumWeb-Regular";}
    .titillium-web-semi-bold { font-family: "TitilliumWeb-SemiBold";}
    .titillium-web-semi-bold-italic { font-family: "TitilliumWeb-SemiBoldItalic";}

  2. Dimitar
    Dimitar avatar
    45 posts
    Member since:
    May 2014

    Posted 06 Sep Link to this post

    Should use the font name for example Roboto-Black , instead of  roboto-black. SO the working example will be 

    <Button text="Login" tap="onTapLogin" marginTop="20" class="whitecolor" backgroundColor="#55D3FF" 
    fontFamily="TitilliumWeb-SemiBold" />

  3. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    294 posts

    Posted 07 Sep Link to this post

    Hello Dimitar,

    Glad to see that you have already managed to resolve the issue.
    Indeed, there is a crucial difference in the way Android and iOS are recognizing the fonts.
    In Android, the fonts are recognized by their file name.
    In iOS, the fonts are recognized by their font name.

    More information about the difference and how to overcome this so that both platforms can use the same name can be found here.

    Regards,
    Nikolay Iliev
    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