Custom font not applied in mobile application

I have used the custom font for my mobile application. Font-family is applied in the web preview. But when I open the application which was installed. Font- family is not applied.

How can I rectify it?

Hi Ellakiya,

Assuming you have some CSS like this:

@font-face {    
    font-family: 'Bree Serif';
    src: url('/MSP_Home/BreeSerif-Regular.ttf') format('truetype');
    font-weight: normal;    
    font-style: normal;
}

You need to add the the font file as a file in the resources.

On the added font file in the Resources folder you make sure to set the Deploy Action to Deploy To Target Directory.

Alternatively you can import fonts like 

@import url("//fonts.googleapis.com/css?family=PT+Sans");

Regards,

Daniel

Daniël Kuhlmann wrote:

Hi Ellakiya,

Assuming you have some CSS like this:

@font-face {    
    font-family: 'Bree Serif';
    src: url('/MSP_Home/BreeSerif-Regular.ttf') format('truetype');
    font-weight: normal;    
    font-style: normal;
}

You need to add the the font file as a file in the resources.

On the added font file in the Resources folder you make sure to set the Deploy Action to Deploy To Target Directory.

Alternatively you can import fonts like 

@import url("//fonts.googleapis.com/css?family=PT+Sans");

Regards,

Daniel

Thanks for you reply,

I have used the above css. Font-family is applied on web preview. But the same font-family is not applied on mobile application which is installed.


Ellakkiya Selvadurai wrote:

I have used the custom font for my mobile application. Font-family is applied in the web preview. But when I open the application which was installed. Font- family is not applied.

How can I rectify it?

Hi,

I am using the below approach for mobile application & it is working perfect despite across all devices & yup with browser for me :)


SyntaxEditor Code Snippet

@import url('https://fonts.googleapis.com/css?family=Lato:400,700|Open+Sans');
        
        body, select, textarea, input, button {
            font-family: 'Lato', sans-serif;
            font-family: 'Open Sans', sans-serif;
        } 


Please try to use this, You can add this sin Your Application Theme.

Thanks,

Assif