How to add custom fonts Ionic

I am using

ionic cordova run android --prod

How to add custom fonts? Any Idea? Proper way to add please?

I would add the font files to the src/assets/fonts folder, then in src/theme/variables.scss add the necessary @font-face rules and set the font stack by overwriting $font-family-base.

There should be a $font-path variable at the top of the variables.scss file, which you could use like:

url($font-path + "/OpenSans-Regular-webfont.woff2")
2 Likes

I want to use 3 different fonts within app? Is this affect on original fonts?

Ionic doesn’t add any fonts, it uses the OS’s default UI/system font. You can add as many fonts as you like, I guess… just remember the basics of typography :wink:

1 Like

Wow… Thanks It Worked.

Also, I have added ion-label text to center in component’s scss file but when I am creating --prod build it doesn’t work otherwise it works for normal build. Why?

It is working only in browser not in Android device. What to do?

Sorry, just saw that now… learn how to use debugging tools, I guess. Can’t help you with that.

1 Like

Any Solution on font not loading by using --prod flag issue?