Custom font Ionic 2

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

Solution

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