[css3-fonts] @font-face font-family names used in other @font-face rules

As you all know, the @font-face rule allows a new font-family name to
be defined, and the src property defines where the font can be found.
However, there is no way to "chain" @font-face rules together, I
believe. If there is, I couldn't find it in the current CSS Fonts
module spec.

Let me give a use-case, which I described in a blog post elsewhere[1].

Google Web Fonts (or some other third party) may have provided a
@font-face rule via a <script> or @import, which would have the effect
of giving this CSS:

  @font-face {
    font-family: FooBar;
    src: local("Foo Bar"), url("...") format("...");
  }

In your own CSS, you may wish to use unicode-range to restrict the
styling of FooBar to only certain characters (in this case, &):

  @font-face {
    font-family: Baz;
    src: local("FooBar"); /* doesn't work */
    unicode-range: U+26;
  }

  p { font-family: Baz, serif; }

This is especially useful if the third party has returned a version of
FooBar containing only glyphs for U+0026, versus the entire set of
characters (increasing loading times). But, because FooBar is not
installed locally, local("FooBar") won't apply, and so Baz cannot be
used for this purpose.

Is there any way to achieve this? If not, perhaps something similar to
local() could be defined that would use other @font-face rules. Or
maybe local() could also do that. In either case, perhaps there are
parallelism issues: if the @font-face rule is in a separate file (or
comes via a <script>), then unless a @font-face rule should block (as
in block the CSS processing) on local() font-family values, the name
might not yet be available? Although perhaps on subsequent requests
the browser would likely have the @font-face font name available and
would know it can be used?

[1]: https://aprescott.com/posts/specific-character-fonts

Received on Monday, 4 March 2013 14:30:31 UTC