Search code examples
androidionic-frameworkionic3webfonts

Ionic - Custom font doesn't load

I'm trying to use the Candara font in my Ionic app (v3.19). On local browser it works, but on the Android Oreo device I'm testing with it does not work.

I have included the font files under src/assets/font, e.g. enter image description here

I have added the @font-face variable to 'variables.scss': enter image description here

$font-path: "../assets/fonts";

When I've built, I can at least see the woff file appear in the fonts folder under the platforms folder for Android, e.g.

enter image description here

Via Chrome developer tools, I can see that the fonts appear not to have copied across to the build, as the only fonts I can see are the default roboto fonts:

enter image description here

Any ideas what I could be doing wrong here?

Solution

  • My font-face declaration was dodgy I think. I added some new filetypes and then changed my font-face to this and it started to work: 

    @font-face {
  font-family: 'candara';
  src: url($font-path + '/candara.eot');
  src: url($font-path + '/candara.eot') format('embedded-opentype'),
       url($font-path + '/candara.woff2') format('woff2'),
       url($font-path + '/candara.woff') format('woff'),
       url($font-path + '/candara.ttf') format('truetype'),
       url($font-path + '/candara.svg') format('svg');
  font-weight: 400;
  font-style: normal;
}