Skip to Content (Press Enter)
UserImage.jpg
Ellakkiya
334Views
3Comments
Custom font not applied in mobile application
Question

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?

0
0
03 Mar 2019
Copy Link
2024-07-05 14-16-55
Daniël Kuhlmann
 
MVP

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

0
0
03 Mar 2019
Copy Link
UserImage.jpg
Ellakkiya

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.


0
0
06 Mar 2019
Copy Link
2021-04-09 11-42-43
assif_tiger
 
MVP

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

0
0
06 Mar 2019
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.