What Is the Purpose of Using Font: Inherit

What is the purpose of using font: inherit?

Like the other answers have said, it’s to inherit a CSS property from the parent element.

What the other answers have failed to say is why you’d need this. Because, after all, CSS properties are inherited anyway, right?

Well, no. Most are, by default (but link colour isn’t inherited from the parent element, for instance). But consider this case:

p { color: blue; }

div.important { color: red; }

<div class="important">
    <p>This is a text</p>
</div>

Now the text will be blue, not red. If we want the <p> to have its parent’s styling rather than its default styling, we have to override its CSS. We could of course repeat the property value (red) but that violates DRY (don’t repeat yourself). Instead, we inherit it:

div.important p { color: inherit; }

Why would anyone use font-family: inherit;

body {
    font-family: Verdana;
}

p {
    font-family: Helvetica;
}

p.other-font {
    font-family: inherit;
}

I think if you do it like this you will always have Helvetica for the other-font and the body font for all the rest. I think it's kinda unusual but that would be a case to use inherit

Why would anyone use font-family: inherit;

body {
    font-family: Verdana;
}

p {
    font-family: Helvetica;
}

p.other-font {
    font-family: inherit;
}

I think if you do it like this you will always have Helvetica for the other-font and the body font for all the rest. I think it's kinda unusual but that would be a case to use inherit

font-family is inherit. How to find out the font-family in chrome developer pane?

Developer Tools > Elements > Computed > Rendered Fonts

The picture you attached to your question shows the Style tab. If you change to the next tab, Computed, you can check the Rendered Fonts, that shows the actual font-family rendered.

Font inheritance on input

Most HTML elements aren't assigned a font-family by the browser's user-agent style sheet, so they will inherit whatever you set on the body element.

Some elements, however, do receive styles from the user-agent, so they override the family you have on body. Inputs, buttons, and other form controls are often a problem.

In a CSS reset, it is very common to give these elements font-family: inherit example from normalize.css:

input {
  font-family: inherit;
}

Inherit will set the input to use whatever font-family it would normally inherit, so it will then use your styles set on body.

Why is css font-family:inherit affecting color of select in Chrome? (with example)

It is different depending on the browser you are using. Each browser has their own default settings.

You can find a list of default styles across all browsers here. When inspecting elements on chrome you can see default styles labeled as user agent stylesheet. An example of this is seen below:

Many people use a CSS reset file to standardize these settings across browsers. The Eric Meyer's reset is a popular option to achieve this.

Angular `font: inherit` breaks fonts

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

Can I prevent a style rule from being inherited?

No.

If they didn't inherit, then they wouldn't have any value at all.

There is no way to inherit from an element other than the parent element.

If you want them to have a value other than inherit, 100%, 1em or whatever their default is: You need to specify it explicitly.

You can use the rem unit to take the font size from the root element, so you could say:

html { font-size: 16px; }
* { font-size: 1rem; }
.parent { font-size: 14px; }

Note that this might have side effects you dislike such as changing the font size of <input> and <small> elements.

Best practice for font-size inheritance

Set font size for blocks only, such as headings and navigation blocks. Changing font inline causes a mess, so just don’t set font size for, say, links. Instead, when desired, set the font size of a ul or div or other element that contains navigation links.

In general, use as few font-size settings as possible, to minimize risks of unwanted cumulative effects.

Notes:

This is not about inheritance at all. When you set font-size on an element, the element certainly does not inherit font size. This is about the effect of the relative nature of the em unit.

Should you have set a:link{font-size:1.5em;} for example, you can easily override it for links inside paragraphs without using !important. You just have to be more specific, and the natural way here would be p a:link{font-size:1em;}.

---

Related Topics