Ionic - Custom font doesn't load

Question

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.

I have added the @font-face variable to 'variables.scss':

$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.

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:

Any ideas what I could be doing wrong here?

Ciaran Gallagher Ciaran Gallagher · Accepted Answer · 2018-03-11T21:47:20

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;
}

Ionic - Custom font doesn't load

1 Answers