Hi,
Do you have the screens in one e-space and the theme (CSS) in another? Or do you have everything in the same e-space?

Hi Martijn,

If on Chrome it seems to work but on iOS doesn't, it's probably because Safari (and iOS webviews) can't handle truetype well. You may check if changing the format to format('opentype') fixes the issue. However I'd recommend you to strengthen your font declaration to add support for more webviews, browsers and versions. 

You can try this site to generate font files and font-declarations that a lot more browsers will understand.

Cheers,

Miguel

Hi Martijn,

Have you tried to adjust the filepath? Sometimes an cordova iOS app does strange adjustment to resource paths.
So for example:

 url('./fonts/BreeSerif-Regular.ttf')

 of 

 url('../fonts/BreeSerif-Regular.ttf')

Regards,
Jasper

Hi guys,

Thanks for your input!

With some more trial-and-error I found that the problem was that the "target directory" of the resource was set to "fonts". When I set the target directory to nothing, my problem was solved.

So in summary this works:

Add the font as a resource:

• Add a font (a TTF-file) to the resource of the app
• Set target directory to nothing 
• Set action to "Deploy to Target Directory"
• The run-time path now reads: "/MSP_Home/BreeSerif-Regular.ttf"

The Css for defining the font:

@font-face {    
    font-family: 'Bree Serif';
    src: url('/MSP_Home/BreeSerif-Regular.ttf') format('truetype');
    font-weight: normal;    
    font-style: normal;
}

And using the font:

.app-menu a {
    font-family: 'Bree Serif' !important;
}