Forum Moderators: not2easy

Message Too Old, No Replies

Font passbacks

         

csdude55

8:17 pm on Feb 15, 2020 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I can't find a way to properly test this, so I'm hoping the great brains of WebmasterWorld can confirm this one for me :-)

Would it be "correct" to apply a font family to the body, then apply other fonts to other elements that would pass back to the ones set in the body if they don't exist?

Meaning, are these two essentially the same thing?:

/* option 1 */
html, body { font-family: Arial, Tahoma, Helvetica }
p { font-family: Roboto }

/* option 2 */
html, body { font-family: Arial, Tahoma, Helvetica }
p { font-family: Roboto, Arial, Tahoma, Helvetica }


And while we're at it, is there a way to change the font size in case of a passback? So, for example, if the primary font is naturally larger than the secondary then I might want that first one to have a font size of 11px, but the secondary to be 12px.

lammert

12:04 am on Feb 16, 2020 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Font-family statements are parsed from left to right. So for the p attribute, in both examples the sequence in which the browsers searches for fonts is first "Roboto", then "Arial", then "Tahoma" and last "Helvetica". Because you don't know which fonts are installed on the system (if any at all) you may want to end with a generic font-family like "sans-serif".

With the short-hand font it should be possible to set different sizes. For example:

p { font: 12px Roboto, 11px Arial, 12px Tahoma }

I don't think this will be portable to all browsers and systems though because natural font sizes may differ between systems.

lucy24

1:44 am on Feb 16, 2020 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Meaning, are these two essentially the same thing?:
Yes. Everything is inherited. In fact, you don't need to set the same thing for "body" and "html", since one is contained within the other.

Remember that every font-family declaration should include as its last fallback item a generic font family, generally "serif" or "sans-serif", whichever applies. (Rarely "monospace", still more rarely cursive or fantasy.) So it’s "Palatino, serif" or "Arial, Helvetica, sans-serif".

And now go to your favorite browser developer and nag about making "font-size-adjust" a universally recognized feature, since it would obviate a lot of issues.