Adding custom fonts

Adding custom fonts

  

How can I add my own fonts in a mobile app? Like I want to add calibri font in my app. How can I do that?

Solution

You can do this using (as example) the following css

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

Notice the scr: url parameter?
You need to add the the font file as a file in the resources (deploying to a target folder).

(example with an excel file)

Or you can "import" the font, like this:

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

Those are just examples.

There is no difference using custom fonts between web and mobile applications.

Cheers,
Eduardo Jauch


Solution

The advantage of including the fonts as a resource is that they are included in your mobile app from the start.
I'm not sure if the fonts are also cached if you use the @import solution.

I just tested, and it worked perfectly. Thanks for the info.

Hi, 

I have been trying to use the font that I downloaded using the above method  but still my my browser is not picking up  the font family. Here are the screenshots for the same.

Shashankit, take a look in the CSS I provide and check the difference in the @font-face.

You have to use it, not a class, to the browser to load the font.
After that you can define the font in a class in the usual way.

Cheers.

Shashankit Thakur wrote:

Hi, 

I have been trying to use the font that I downloaded using the above method  but still my my browser is not picking up  the font family. Here are the screenshots for the same.

Hi Shashankit,


You are getting this message because you are trying to use src property at class level instead you should use 

@font-face


Hope this helps.


Thanks

Atul Patel


Atul Patel wrote:

Shashankit Thakur wrote:

Hi, 

I have been trying to use the font that I downloaded using the above method  but still my my browser is not picking up  the font family. Here are the screenshots for the same.

Hi Shashankit,


You are getting this message because you are trying to use src property at class level instead you should use 

@font-face


Hope this helps.


Thanks

Atul Patel


Thanks! It worked!


Hi Shashankit,


Thanks to Eduardo :)