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?


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("//");

Those are just examples.

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

Eduardo Jauch


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.