How to include custom font finr mobile app?

How to include custom font finr mobile app?

  

Hi,

I need to use a custom fonts in our app. What is the recommended way to include font files?

If I use @font-face with url to resource file I have a warning in TrueChange panel that the resource won't be cached for offline usage. 

It would be good to load font files with the app itself (using "MyResources.zip") not when loading it so the loading time will decrease.

Thank you

Hi Mykola,

Can you share the snippet of css that you're using? And the version of the platform.

Hi João,


I've used base64 encoded font:

@font-face {    font-family: 'Santana-Bold';    src: url(data:font/truetype;charset=utf-8;base64,AAEAAAATAQAABAAwRkZUTWVR9UoAAAE8AAAAHEdERUYAJwD5AAABWAAAAB5HUE9TmpEUPQAAAXgAABR2R1NVQrj/uP4AABXwAAAAME9TLzIenQkGAA.....


However if I use code separate file for font it is also working and do not show the warning message:

@font-face {    font-family: 'Lato-Regular';    src: url(/Myapp/Lato-Regular.ttf) format('truetype');    font-weight: normal;    font-style: normal;}

So I suppose separate file deployed to target directory and @font-face is the correct approach. However my concern is that the font files are pretty big (~1mb each) and as they are loading when app is launched it feels pretty slow to launch. So it would be great to pack this font files into the app file it would be great.

Thank you


The former is preferable. Having a base64 won't solve that problem either, as you're just transferring the size to the css rather than a separated file. Btw, once the file is on the device cache it won't be a problem anymore (the font should be downloaded only once) besides the the loading time when the font is used.

Ok.

So there is no way at the moment to put font file directly to application file (like custom icons) so it can be used in app? Is there a documentation for what app preferences can be set? https://success.outsystems.com/Documentation/10/Delivering_Mobile_Apps/Customize_Your_Mobile_App/Extensibility_Configurations_JSON_Schema here is some examples and general schema, but how to know what preferences are available ?

Solution

Hi Mykola,

Have you tried to attach the fonts on your application as a resource?

Cheers,
Luís Silva

Solution

Hi Luís,

Yes currently font are included as resources. Does it mean they are packed within the app file or they are cached after first application load?

Yes. They will be packed with the app and will work offline too.

Luís thank you for confirming this - it was my doubt.