Adding fallback fonts to the @font-face definition

Question

Is it possible to add a fallback font directly to the definition of the font-face?

Example:

@font-face {
  font-family: 'MyWebFont', Arial, Helvetica, sans-serif;
  src: url('fonts/MyWebFont.eot');
  src: url('fonts/MyWebFont.eot?#iefix') format('embedded-opentype'),
  url('fonts/MyWebFont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

And then using it as font-family value with automatic fallback, like so:

p {
  font-family: MyWebFont;
}

My goal is not to having to define the fallback fonts everywhere I define a new font-family. If not like above, can I somehow achieve this without JavaScript? Thanks for your help!

Answer 1

No, you cannot specify any fallback fonts inside a @font-face rule, because such a rule defines a font face and assigns a name to it. Inside the rule, the font-family part can contain only one name, the name you choose to assign. It would be pointless list several names there, since only the first one can possibly matter (and, besides, in this context no name has any predefined meaning, e.g. Arial would not mean the Arial font but be just an arbitrary assigned name).

Fallback fonts can be specified only in normal font-family rules.

Consider organizing your style sheet so that the relevant font-family list appears only once, using a suitable list of selectors, like

p, blockquote, .foobar, .something {
   font-family: MyWebFont, Arial, Helvetica, sans-serif;
}