CODEWITHSUNDEEP
cssfontsdefaultfont-family
Ryan
Ryan

Reputation: 3936

Browser font defaulting

Say if I set the font-family for the page body to font1, font2, font3 and then I set the h1 tag's font family to font4, font5. If font 4 and 5 weren't installed, would the browser try font 1,2 and 3 before it used the browsers default font?

Upvotes: 3

Views: 236

Answers (3)

Rupert Madden-Abbott
Rupert Madden-Abbott

Reputation: 13298

Short Answer: No

Good question. The feature you are talking about is known as inheritance. Essentially, will a child element inherit a parent's font-family if its own specified font-family is not installed on the user's computer.

I couldn't find any explicit documentation although this specification could be taken to mean that no inheritance will occur in this case. Therefore, to make sure, I tested out the latest stable build of Firefox with the following:

<body>
    <p>Hello</p>
</body>

body {font-family: Arial;}
p {font-family: Quill;}

I don't have Quill installed but I do have Arial. However, despite this fact, the p element is rendered in the default serif font, not in Arial.

Since there is at least one major browser that functions in this way, in order to ensure consistency, you should always use this instead:

body {font-family: Arial;}
p {font-family: Quill, Arial;}

Thinking more about this, one way to fix this would be to allow the following:

p {font-family: Quill, inherit}
p {font-family: Quill, default}

The second rule is essentially what browsers do at the moment, but only implicitly. If CSS allowed us to specify the last property explicitly, we could alter this behaviour. Unfortunately, this does not work currently. Anybody know how to submit suggestions to the w3C?

Upvotes: 4

BoltClock
BoltClock

Reputation: 724502

No, because when you specify font-family, the font stack doesn't get inherited from the parent element and then added to. You're giving it a brand new font stack of its own, separate from its parent element's.

If you want the browser to use the first three fonts for <h1>, you need to specify that:

body { font-family: font1, font2, font3; }
h1 { font-family: font4, font5, font1, font2, font3; }

Tedious, but that's how CSS font-family works :)

Upvotes: 5

Moin Zaman
Moin Zaman

Reputation: 25465

nope. it will default to the browser default.

Upvotes: 2

Related Questions