Narong Narong - 1 year ago 36
CSS Question

Will text inherit font stacks from parent elements if it's own font isn't available?

I work for an email marketing company and we use a propriety software to make our HTML emails. It's very old and definitely not a coder's dream. Unfortunately, getting new software is not an a quick or simple option since it's so deeply embedded in our system.

The problem:

When making an email, I mainly code by hand and have relied on font stacks to give me some freedom with font faces. Other people who aren't so well-versed in code will use our propriety software's GUI to try to accomplish the same thing. When they work in the "build" view (instead of code view) and they copy and paste text, the styles of the text is copied with it, but it only keeps the first font in my font stack. So when they paste it, it will only paste the preferable font face and no fallbacks.

When someone copies this:

<span style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; color: #333333">Hello</span>

And pastes it somewhere else, this is what gets pasted:

<span style="font-family: 'Helvetica Neue'; font-size: 14px; color: #333333">Hello</span>

Our wonderful software doesn't copy the complete font stack. All of the fallback fonts got dropped. I realize that this can be easily fixed by going back into the code, but our company has people that know almost nothing about HTML or CSS and they're not capable of doing so.

My question is:

If the font for the specific SPAN or DIV isn't available on the viewer's system, will it inherit the font stack from its parent element?

Answer Source

No, it will not. CSS inheritance does not work that way.

Suppose you have e.g.

<div style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;">  
  <span style="font-family: 'Helvetica Neue'">Hello</span>

Then the font-family property of the span element has a value set. It does not matter that this value has no effect in most computers (which do not have Helvetica Neue). It's the value, and it is used. Since the element has a value assigned to the property, it cannot inherit it.

This means that the user agent’s own fallback mechanisms will be used when the font specified in the font-family is not available. Basically, its default font (usually Times New Roman in web browsers) will be used.