What is the purpose of using font: inherit?

Solution 1:

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; }

Solution 2:

The declaration font:inherit is used in many “CSS Reset” stylesheets, which have often been copied into various libraries and frameworks. The original Reset CSS by Eric Meyer has font:inherit. No specific motivation is given. The overall rationale is said to be “to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on”. But Meyer links to a previous post of his where he explains the idea, saying, among other things: “I want all this because I don’t want to take style effects for granted. This serves two purposes. First, it makes me think just that little bit harder about the semantics of my document. With the reset in place, I don’t pick strong because the design calls for boldfacing. Instead, I pick the right element—whether it’s strong or em or b or h3 or whatever—and then style it as needed.”

Several HTML elements have a default rendering in browsers as regards to font properties: headings, form fields, table header cells, some phrase elements, etc. Using CSS Reset, or specifically font: inherit means that on browsers supporting the inherit value, all such elements are rendered in copy text font, unless otherwise specified in a style sheet.

So this is about a particular methodology (or, as some people might say, ideology or religion) of authoring and design. It has gained popularity and often applied routinely.

Solution 3:

The font CSS property is either a shorthand property for setting font-style, font-variant, font-weight, font-size, line-height, and font-family; or a way to set the element's font to a system font, using specific keywords. -MDN

By using font: inherit;, it tells an element to inherit those relevant values from its parent container. See the examples below:

In the 1st group: you can see there are some special style set by default from the browser, h1 is bolder and larger it also inherits the relevant values from body automatically. However, for the input element, it doesn't inherit any of those values, since it's a replaced element and serves its unique purpose.

In the 2nd group: It forces those elements to inherit those values from body by using font: inherit;.

Now, you see what it does. It's entirely up to you when to use it, for instance you might want to use <h1> tag for the site logo in the home page, and you probably want to make it look no difference than it appears on other pages. And of course, it's commonly being used in CSS reset frameworks.

body {
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-style: italic;
}

.inherit {
  font: inherit;
}

<h1>Heading</h1>
<input type="button" value="Button">

<hr>

<h1 class="inherit">Heading</h1>
<input class="inherit" type="button" value="Button">

Solution 4:

Not all browsers inherit font properties on all elements. Netscape 4.x was notoriously bad about about inheritance. Consider the following style:

body { background: black; color: white }

In Netscape 4.x, the color was not applied to table elements, so you would end up with the default black text inside the table on a black background.

Font properties have the same kind of deal for some elements, particularly form elements (and table elements for older browsers). It's not uncommon to see a definition like this:

table, form { font: inherit }

Solution 5:

The inherit is used to get the properties from the parent element. In other words, inherit the properties of parent element.

The default property is inherit, it means, say you have div and a p.

<div>
    <p>Hello World!</p>
</div>

Now you give a style:

div {font-famlily: Tahoma;}
p {font-family: inherit;}

That font-family is inherited to the p from its parent element div.