I've used two fonts throughout the entire application: Bebas Neue and Nunito. I imported these fonts with @import statements in the styles.scss file in the app directory.
@import url('https://fonts.googleapis.com/css?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css?family=Nunito:700&display=swap');
And then used them in individual component.scss with font-family
element {
font-family: "Bebas Neue";
}
And similarliy for the other font as well.
This worked perfeclty fine during development. After the production build, the app still displayed the fonts correctly on my device, but they do not load on other devices at all. This might look like a duplicate of another question, but I could not find a solution to this problem specifically. What could be the problem?
Try to use it implement like this.
Copy paste the below code in your index.html file in your projects src directory like given below inside <head> tag
<link href="https://fonts.googleapis.com/css?family=Bebas+Neue&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito:700&display=swap" rel="stylesheet">