Angular `font: inherit` breaks fonts

user_8003414 0
Viewed 195

In Angular If I use font: inherit style on my component fonts stop working and appear as ▢

app.component.html

<i class="fas fa-car"></i>

app.component.css

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css");

i {
  font: inherit;
}

Stackblitz: Angular Example

I thought I was breaking something within the font awesome library but surprisingly the exact same markup with raw HTML/CSS works fine

<head>
  <style>
    @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css");
    
    i {
      font: inherit;
    }
  </style>
</head>

<body>
  <i class="fas fa-car"></i>
</body>

angular
2 Answers

You dont need font: inherit. Font awesome sets the correct font family already.

Why It works in plain HTML/CSS:

In case of your html/css example, it works because of css specificity, your style i { font: inherit; } is overridden by font-awesome css as class takes precedence over html tags

Why it doesn't work in Angular

Angular adds scope so that the css you apply for one component doesn't affect the other. If you inspect your html, you will find attributes like _ngcontent-* and your css being scoped like

i[_ngcontent-*] {
    font: inherit;
}

And tag+attribute takes precedence over font-awesome css class and that's why icon doesn't appear.

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

user_28434080

In your case, style on i element is generated with random attribute that overrides font-family: "Font Awesome 5 Free" which is necessary for the car icon to be drawn.

user_37038030
Related