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.