0

In my login component's CSS, I am importing the following font:

 @import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@1,600&display=swap);

In another component in the system, I would like to use this same font but I do not want it applied with italics. I am importing it in that component's CSS as:

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400);

In this case, the component is rendering it as if the login page import was being used (the font appears in italics and at 600 font weight).

Until I refresh the page. If I do a refresh, it appears properly at 400 without the bold.

I have tried applying:

font-variation-settings: normal;

To the div containing the text, this has no effect.

What am I doing wrong?

Patrick
  • 5,526
  • 14
  • 64
  • 101

1 Answers1

0

Could be something related to the caching of css and fonts? Maybe here you can find the answer. LINKs: Preloading fonts using angular CLI Browser Caching of CSS files

Marko
  • 1