Custom font Ionic 2

Question

So I'm trying to use a custom font in my Ionic 2 app and for some reason it's displaying something that is not correct.

My font is GothamRounded, so I copy all .ttf, .svg, .otf and .eot files inside the www/fonts folder in my Ionic project.

Then, inside app.component.scss (my main component) I wrote this:

app {

  @font-face {
    font-family: GothamRounded;
    src: url($font-path + "/GothamRounded-Book.ttf");
  }

  font-family: GothamRounded;

}

Now, when my app is reloaded, my font has changed, and if I inspect an element with text inside I can see this in dev console:

app {
    font-family: GothamRounded;
}

But the text displayed has a seriff, and my font doesn´t, so I'm guessing this is not actually getting the real font.

Any idea what might be happening? Thanks

Answer 1

Why the app selector? is it just for showing us the code or you really have an app tag somewhere in you code? For me it's <ion-app>

Try setting the src to all your font extensions and using the format in front of it like

@font-face {
  font-family: GothamRounded;
  src: url($font-path + "/GothamRounded-Book.ttf") format('ttf'), url($font-path + "/GothamRounded-Book.otf") format('otf'), ...;
}

I'm using a custom font too and mine wasn't working inside any other .scss file that wasn't the app.scss file, so inside my app.scss i have this:

@font-face {
  font-family: 'Humanst';
  src: url('../assets/fonts/humanst-webfont.woff2') format('woff2'), url('../assets/fonts/humanst-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

* {
  font-family: 'Humanst' !important;
}