Font is not loading when deployed

Question

I have created an angular app which loads perfectly fine in local environment. all the styles and fonts are getting applied. but when I deploy it the font is not loading. couldn't figure it out why, it didn't show any error or warning message in the console.

I'm importing all the css styles in angular.json file like below

demo4.css has the styles that I need. I placed the demo4 file in the first, middle and last , nothing happened and didn't made any sense !!

When running locally,

When deployed,

I was banging my head for days. What am I missing?

Update #1

This is how it looks like when I build ng build --prod

Answer 1

Looks like you have run into this logged issue:

The only workaround available is to Add Google fonts @import tag in the header of every SCSS used. Or import first the fonts from a different css/SCSS file

EDIT Or import your font in index.html