CODEWITHSUNDEEP
css
Jan Jarčík
Jan Jarčík

Reputation: 2901

Does the css rule font-family overwrite all of the inherited fonts or just adds more options?

I have this problem:

body{
  font-family: 'MyFontFace-font', 'Lucida Grande', Tahoma, Verdana, Arial, etc.
}

H1 {
 font-family: 'MyFontFace-font2'
}

And my question is: If the second font ('MyFontFace-font2') is not loaded, will H1 have the font inherited from body, or from default of browser?

Thanks a lot.

Upvotes: 2

Views: 2296

Answers (1)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201568

The default fallback fonts of the browser will be applied, and any setting on body is ignored.

When you assign a value to a property of an element, like font-family to h1 here, then inheritance will never apply to that property on that element (except, trivially, if you assign the value inherit and the browser supports that). This is not changed by casual things like the value specifying a nonexistent font.

I also tested this with the following simpler document (on a system that has no font named MyFontFace-font2 but has a font named Tahoma):

<!doctype html>
<title>Test5</title>
<style>
body{
  font-family: Tahoma;
}
H1 {
  font-family: 'MyFontFace-font2'
}
</style>
<h1>Hello world</h1>

In Chrome, Firefox, IE the result is that the browser’s default font is used, not Tahoma. This is the expected result, by the specifications.

If the rule on H1 is omitted, then Tahoma is used, due to inheritance – then the h1 element will inherit the font-family property from its parent.

Upvotes: 6

Related Questions