Custom Font - Ionic 3 don't work [SOLVED]


#1

Custom Font related question.
It’s the first time that I try to use a custom font inside the App but I have a lot of problems…

Example: I want to use this google font https://fonts.google.com/specimen/Special+Elite

I’ve downloaded this font and put it into /assets/fonts

In variables.scss I added the code:

@font-face {
  font-family: 'SpecialElite-Regular';
  src:  url('../assets/fonts/SpecialElite-Regular.ttf') format('ttf');
  font-weight: 800;
  font-style: regular;
}

and I tried to apply this font to all the code:
app.scss

*{
font-family: "SpecialElite" !important;
}

But the font isn’t shown (not in browser, not in app).

How can I use a custom font?
I did not find any working guide.

Thank you in advance.

SOLVED:
I’ve included different types of font’s…

variables.scss

@font-face {
  font-family: 'SpecialElite-Regular';
  src:  url( $font-path + '/SpecialElite-Regular/SpecialElite-Regular.ttf') format('ttf'), 
        url( $font-path + '/SpecialElite-Regular/SpecialElite-Regular.eot') format('eot'),
        url( $font-path + '/SpecialElite-Regular/SpecialElite-Regular.svg') format('svg'),
        url( $font-path + '/SpecialElite-Regular/SpecialElite-Regular.woff') format('woff'),
        url( $font-path + '/SpecialElite-Regular/SpecialElite-Regular.woff2') format('woff2');
}

where I want to use my font
font-family: 'SpecialElite-Regular' !important;


#2

Try font-family: "SpecialElite-Regular" !important; in app.scss