Easy question: font-family?

Hi, now I’m tiding up the css. If say the body has font-family:Arial, Helvetica, sans-serif;. And the h1 has font-family:Verdana;. In cases where there is no Verdana on the users computer will it then go in the order that I have listed for the body? Or - do you have to list all the fonts for each element listed? I presume not but I’ve never actually known this answer. Thanks!

you would figure it would cascade, but actually … it doesnt. It goes to the UA’s default. Thats why its a good thing to have COMPLETE STACKS with fallback fonts. For what you said you wanted you would need to do something like:

body {font-family:Arial, Helvetica, sans-serif;}
h1{font-family:Verdana,Arial, Helvetica, sans-serif;}

That was easy. :slight_smile:

Thanks! You sure? How do you know that?

Well that’s a waste of the cascade. The way you showed is the way I had it on quite a few different elements but I changed it as it seemed a waste. But as you say I guess it’s a necessary waste.

I agree. but some things in css and htl are counter intuitive. it helps to think of it this way, if you are familiar with OOP. The cascade is really an property that is copied by a constructor of the child element. That is , by default the property gets set to that of its parent, BUT when you write into the childs font stack you are skipping the constructor and accessing a method that inserts the desired font into the child element’s properties. IF all the fonts are missing, it causes the method to throw an exception … but since triggering the method meant skipping the constructor… it means the element defaults back to the UA’s default font. :confused:

That’s my theory at least

Thank you for the info. But… That’s your theory? Or that’s fact and only how the OS/browser thinks and acts on the font-family cascade is theory?

Ok you were right. Thanks again! I found it answered in the sitepoint reference…

“While an element’s font-family value will be inherited if it’s not explicitly specified, if it is specified, and none of the specified font families match an available font (this case only arises if the list doesn’t include a generic family name), the resulting property value will default to the user agent’s initial value, not the value inherited from the parent element, as you might expect.”

http://reference.sitepoint.com/css/font-family

Eric
When I said theory, I meant I thought you were wondering what could be the internal mechanics of what I had explained… ( why did Target chose red as their color…?) I ask a lot of questions like that, believe it or not it helps me remember stuff like this. Glad to have been able to help.