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 :)



Hi Eduardo, 

In the example you have given above you have used regular fonts. What will be the value of "font-weight" and "font-style" for other fonts like bold, light, etc,....

Hi Sruthi,

You need to setup those by yourself.

Here an example:

@font-face {
  font-family: "PT-sans";
  src: url("fonts/PT-sans-bold.ttf");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "PT-sans";
  src: url("fonts/PT-sans-italic.ttf");
  font-weight: normal;
  font-style: italic, oblique;
}

@font-face {
  font-family: "PT-sans";
  src: url("fonts/PT-sans-normal.ttf");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "PT-sans";
  src: url("fonts/PT-sans-bold-italic.ttf");
  font-weight: bold;
  font-style: italic;
}

Regards,

Marcelo

Hi Marcelo,


Thank you for your help. Now I have another problem. In my application font.googleapis are being imported. But I am not able to find out where it is imported. Is there any way you can help me find it? It imports font-weights 400 and 700 only because of which my screen is not looking according to design. I am not able to share my oml. Hope you can help me.


Thanks,

Sruthi.

Hi Sruthi,

You need to setup those by yourself.

Here an example:

@font-face {
  font-family: "PT-sans";
  src: url("fonts/PT-sans-bold.ttf");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "PT-sans";
  src: url("fonts/PT-sans-italic.ttf");
  font-weight: normal;
  font-style: italic, oblique;
}

@font-face {
  font-family: "PT-sans";
  src: url("fonts/PT-sans-normal.ttf");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "PT-sans";
  src: url("fonts/PT-sans-bold-italic.ttf");
  font-weight: bold;
  font-style: italic;
}

Regards,

Marcelo