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("//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
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 Thakur wrote:
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:
Thanks! It worked!
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.
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.
Maybe I'm late to answer this question but when I experienced this kind of issue using Library module, it won't let you change the resource deploy action to Target Directory. What I did is to add the resource on another module (which is not a library module), then change the deploy action to Target Directory then copy and paste it to your library module (resources). Then you should be able to reference the it from Theme via src url.
Not sure if this is a bad practice for library modules but it seems to work just fine in my case.