What is the purpose of using font: inherit?

Question

I just wanted to know why font: inherit; is used in Cascading Style Sheets.

Answer 1

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">

Answer 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.

Answer 3

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.

Answer 4

Using {font:inherit;} in CSS makes sense because various user agents (a.k.a. browsers) have user agent stylesheet (read: default stylesheet) with something like

body
{
    font: -magic-font-from-user-preferences;
}

textarea, input
{
    font: monospace;
}

The {font:inherit;} is used to workaround the special case where font or font-family is not inherited by default due to user agent stylesheet but the author of the content wishes the font family to be inherited.

The actual user agent behavior with the value inherit differs due to various bugs, unfortunately. Resulting behavior may be closer to author intent than the default value, though.

Answer 5

inherit in CSS simply means it inherits the values from parent element, so for example:

<div style="font-family: Arial;">
   <p style="font-family: inherit; /* This will inherit the font-family of the parent p*/">
      This text will be Arial..And inherit is default behavior of the browser
   </p>
</div>

Here <p> inherits the font-family: Arial; from it's parent div

You need to use inherit for example in the case of anchor elements, the color property is commonly set to blue in the user agent style sheet. If you wanted to reinforce the importance of the inherited value, you could use the value inherit in an author or user style sheet, overwriting the user agent style sheet declaration.

More Reference

Answer 6

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 }